/*
Theme Name: CJarq
Theme URI: https://www.cj-arq.com
Author: CJarq Architecture & Landscape
Description: Tema propio de CJarq, armado a partir del diseño de Claude Design (proyecto CJarq web design build).
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: cjarq
*/
/* CJarq — shared stylesheet for the static multi-page site.
   Design-system tokens are imported first, then the site's dark-theme
   overrides + layout helpers + hover states (previously inline in the app). */

@import url("_ds/design-system-50109aac-80b1-4cad-ac09-e30dbe89662b/tokens/fonts.css");
@import url("_ds/design-system-50109aac-80b1-4cad-ac09-e30dbe89662b/tokens/colors.css");
@import url("_ds/design-system-50109aac-80b1-4cad-ac09-e30dbe89662b/tokens/typography.css");
@import url("_ds/design-system-50109aac-80b1-4cad-ac09-e30dbe89662b/tokens/spacing.css");
@import url("_ds/design-system-50109aac-80b1-4cad-ac09-e30dbe89662b/tokens/effects.css");

/* ---- Dark theme overrides (surface/text/border semantics) ---- */
:root{
  --surface-page:#14161b;
  --surface-raised:#1c2028;
  --surface-sunken:#181c22;
  --surface-muted:#1f242c;
  --surface-inverse:#0f1217;
  --surface-inverse-2:#0c1f2b;
  --text-primary:#ECEDE6;
  --text-secondary:rgba(236,237,230,0.70);
  --text-tertiary:rgba(236,237,230,0.48);
  --border-hairline:rgba(236,237,230,0.13);
  --border-soft:rgba(236,237,230,0.07);
  --slate-300:rgba(236,237,230,0.35);
  --rail:206px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:#14161b;color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
::selection{background:var(--gold-soft);color:#14161b}
a{color:var(--gold-500)}
a:hover{color:var(--gold-soft)}

/* ---- Layout scaffolding ---- */
html,body{overflow-x:hidden;max-width:100%}
img,iframe,video,svg{max-width:100%}
.cj-main{margin-left:var(--rail)}
.cj-topbar{display:none}
@media(max-width:1024px){
  .cj-side{display:none !important}
  .cj-main{margin-left:0 !important}
  .cj-topbar{display:flex !important}
}
@media(max-width:860px){
  .cj-grid2{grid-template-columns:1fr !important}
}

/* ===================================================================
   1 · SIDE RAIL — social icons inside the rail content width (4 + 3)
   =================================================================== */
/* The only direct <div> child of the rail is the social row. */
.cj-side>div{
  display:grid !important;
  grid-template-columns:repeat(4,32px) !important;
  gap:8px !important;
  justify-content:start;
  align-items:center;
  margin-left:-8px;                 /* pulls the first glyph flush to the rail gutter */
  margin-top:1.25rem !important;
  padding-top:1.25rem !important;
  max-width:calc(var(--rail) - 2.7rem);
}
.cj-side>div>a{
  width:32px;height:32px;
  align-items:center;justify-content:center;
}
.cj-side>div>a>svg{width:16px !important;height:16px !important}
/* Rail must always fit; tighten before allowing an internal scroll. */
@media(min-width:1025px){ .cj-side{overflow-y:auto;overscroll-behavior:contain} }
@media(min-width:1025px) and (max-height:820px){
  .cj-side{padding-top:1.6rem !important;padding-bottom:1.5rem !important}
  .cj-side>a:first-child img{height:78px !important;width:78px !important}
  .cj-side>a:first-child>div{margin-top:0.7rem !important}
  .cj-side nav a{padding:0.5rem 0 !important}
  .cj-side>a[aria-label="Language"]{margin-top:0.6rem !important}
  .cj-side>div{margin-top:0.9rem !important;padding-top:1rem !important}
}
@media(min-width:1025px) and (max-height:730px){
  .cj-side>a:first-child img{height:60px !important;width:60px !important}
  .cj-side nav a{padding:0.4rem 0 !important;font-size:0.66rem !important}
  .cj-side>div{margin-top:0.7rem !important;padding-top:0.8rem !important}
}

/* ===================================================================
   2 · FOOTER — logo block and social row share width + left edge
   =================================================================== */
footer .cj-grid2>div:first-child>img{width:224px !important;height:auto !important;display:block}
footer .cj-grid2>div:first-child>div{
  width:224px;display:flex !important;justify-content:space-between !important;
  gap:0 !important;margin-top:16px !important;
}
footer .cj-grid2>div:first-child>div>a>svg{width:20px !important;height:20px !important}

/* ===================================================================
   3 · TABLET (768–1024) AND PHONE (≤767)
   =================================================================== */
@media(max-width:1024px){
  .cj-topbar{height:64px;padding:0 2rem !important}
  .cj-topbar img{height:38px !important}
  .cj-topbar-right{display:flex;align-items:center;gap:0.25rem}
  .cj-topbar-wa{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--text-primary);text-decoration:none}
  .cj-topbar-wa:hover{color:var(--gold-500)}
  #cj-menu-open{width:44px;height:44px;align-items:center;justify-content:center}
  /* hero: viewport minus the bar */
  main [style*="min-height:100vh"]{min-height:calc(100vh - 64px) !important}
  main [style*="height:100vh"]{height:auto !important}
  /* grids */
  .cj-grid4,[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  [style*="grid-template-columns:repeat(5,minmax(0,1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  /* footer: two columns — logo+icons / contact on the left, lists on the right */
  footer .cj-grid2{grid-template-columns:1fr 1fr !important;gap:2.25rem 2.5rem !important}
  footer .cj-grid2>div:nth-child(1){grid-column:1;grid-row:1}
  footer .cj-grid2>div:nth-child(4){grid-column:1;grid-row:2}
  footer .cj-grid2>div:nth-child(2){grid-column:2;grid-row:1}
  footer .cj-grid2>div:nth-child(3){grid-column:2;grid-row:2}
  footer .cj-grid2>div:nth-child(5){grid-column:1/-1;grid-row:3}
  footer .cj-grid2>div:nth-child(5) a{height:200px !important}
}
@media(max-width:1000px){
  /* editorial / listing splits stack: image on top, text below */
  main [style*="grid-template-columns:"][style*="fr "]{grid-template-columns:1fr !important}
  main [style*="grid-template-columns:"][style*="fr "] img{width:100% !important;height:auto !important;max-height:62vh;object-fit:cover}
  main [style*="grid-template-columns:"][style*="fr "] [style*="order:"]{order:0 !important}
}
@media(max-width:767px){
  .cj-topbar{height:56px;padding:0 1.25rem !important}
  .cj-topbar img{height:32px !important}
  main [style*="min-height:100vh"]{min-height:calc(100svh - 56px) !important}
  /* hero media focal point keeps the house in frame on a tall screen */
  main section>div>img[style*="object-fit:cover"],main section>div>video{object-position:50% 38% !important}
  /* one column everywhere */
  .cj-grid4,[style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,minmax(0,1fr))"],
  [style*="minmax(220px"],[style*="minmax(260px"],[style*="minmax(280px"],[style*="minmax(300px"]{grid-template-columns:1fr !important}
  /* readable body copy (side gutters come from the sections' own
     clamp(1.25rem,5vw,4.5rem) = 20px at phone / ~38px at tablet) */
  main p,main li{font-size:1rem !important;line-height:1.75}
  /* buttons: full width, stacked */
  .cj-btn{width:100% !important;display:flex !important;max-width:460px}
  main div:has(>.cj-btn){flex-wrap:wrap !important;flex-direction:column;align-items:stretch}
  /* forms: 16px inputs so iOS doesn't zoom, 44px tap areas */
  .cj-field,input,textarea,select{font-size:16px !important}
  .cj-check-wrap{min-height:44px;align-items:center !important;padding:0.35rem 0}
  .cj-check-wrap input{width:22px !important;height:22px !important}
  /* footer: single column in reading order */
  footer .cj-grid2{display:flex !important;flex-direction:column;gap:2rem !important}
  footer .cj-grid2>div:nth-child(1){order:1}
  footer .cj-grid2>div:nth-child(4){order:2}
  footer .cj-grid2>div:nth-child(2){order:3}
  footer .cj-grid2>div:nth-child(3){order:4}
  footer .cj-grid2>div:nth-child(5){order:5}
  footer .cj-grid2>div:nth-child(5) a{height:220px !important}
  footer>div>div:last-child{flex-direction:column;gap:0.5rem !important}
}

/* ===================================================================
   4 · FULL-SCREEN MOBILE MENU
   =================================================================== */
/* Square brand mark: reserve the box so the logo can never collapse to 0 width */
.cj-side>a img,.cj-topbar img,#cj-mobile-menu>div>img{aspect-ratio:1/1}

body.cj-menu-open{overflow:hidden}
#cj-mobile-menu{overflow-y:auto}
#cj-mobile-menu nav a{min-height:44px;display:flex !important;align-items:center}
#cj-mobile-menu nav a[style*="font-size:2rem"]{font-size:clamp(1.5rem,6vw,2rem) !important}
/* socials: one centred row at the bottom */
#cj-mobile-menu>div:last-child{
  justify-content:center !important;gap:0 !important;
  display:flex !important;width:100%;max-width:340px;margin:2rem auto 0.5rem !important;
  padding-top:1.5rem;border-top:1px solid var(--border-hairline);
}
#cj-mobile-menu>div:last-child>a{width:40px;height:40px;align-items:center;justify-content:center}
#cj-mobile-menu>div:last-child>a>svg{width:20px !important;height:20px !important}
.cj-hscroll::-webkit-scrollbar{display:none}
.cj-proj-item{flex:0 0 calc(23% - 16px)}
.cj-grid4{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cj-grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cj-grid4{grid-template-columns:1fr}}
@media(max-width:1100px){.cj-proj-item{flex:0 0 calc(31% - 14px)}}
@media(max-width:820px){.cj-proj-item{flex:0 0 calc(46% - 12px)}}
@media(max-width:560px){.cj-proj-item{flex:0 0 68%}}

/* ---- Mobile menu (hidden until toggled) ---- */
#cj-mobile-menu{display:none}

/* ---- Button hover/press (mirrors the design-system Button JS) ---- */
.cj-btn{transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.cj-btn:active{transform:translateY(1px)}
.cj-btn--primary:hover{background:var(--ink-700)}
.cj-btn--secondary:hover{border-color:var(--gold-500) !important;color:var(--gold-600) !important}
.cj-btn--gold:hover{background:var(--gold-600)}
.cj-btn--inverse:hover{background:var(--bone-200)}
.cj-btn--ghost:hover{background:var(--surface-sunken)}

/* ---- Link / affordance hover states (previously inline style-hover) ---- */
.cj-hover-gold:hover{color:var(--gold-500) !important}
.cj-hover-goldsoft:hover{color:var(--gold-soft) !important}
.cj-hover-ondark:hover{color:var(--text-on-dark) !important}
.cj-hover-goldborder:hover{border-color:var(--gold-500) !important;color:var(--gold-soft) !important}
.cj-hover-goldline:hover{border-color:var(--gold-500) !important;color:var(--gold-500) !important}
.cj-hover-cardgold:hover{border-color:var(--gold-500) !important}
.cj-hover-gap{transition:gap var(--dur-base) var(--ease-standard)}
.cj-hover-gap:hover{gap:1rem !important}

/* ---- Navigation rail links: gold tick expands + text brightens on hover ---- */
.cj-nav-a:hover{color:var(--gold-500) !important}
.cj-nav-a:hover .cj-nav-tick{width:18px !important}

/* ---- Project card: slow image zoom on hover ---- */
.cj-pcard img{transition:transform var(--dur-reveal) var(--ease-out)}
.cj-pcard:hover img{transform:scale(1.045)}

/* ---- Form field focus (mirrors DS Input/Textarea) ---- */
.cj-field:focus{border-color:var(--gold-500) !important}
.cj-check-wrap input:checked{background:var(--gold-500) !important;border-color:var(--gold-500) !important}
.cj-check-wrap input:checked + .cj-check{opacity:1 !important}

/* ---- WhatsApp float ---- */
.cj-wa{position:fixed;right:24px;bottom:24px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25D366;display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;box-shadow:0 10px 28px rgba(24,30,42,0.22),0 2px 6px rgba(24,30,42,0.12);transition:transform var(--dur-base) var(--ease-standard),opacity var(--dur-base) var(--ease-standard)}
.cj-wa:hover{transform:translateY(-2px)}
.cj-wa[data-tucked="1"]{opacity:0;pointer-events:none}
.cj-wa-tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--ink-900);color:var(--text-on-dark);font-family:var(--font-label);font-size:0.625rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;padding:0.5rem 0.75rem;border-radius:var(--radius-xs);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard)}
.cj-wa:hover .cj-wa-tip{opacity:1}
@media(max-width:1024px){
  .cj-wa{width:52px;height:52px;right:24px;bottom:24px}
  .cj-wa-tip{display:none}
  #cj-contact-form,.cj-form-card{padding-bottom:4.75rem}
}
@media(max-width:767px){
  .cj-wa{width:52px;height:52px;right:16px;bottom:16px}
  /* keep the float clear of the submit button and the last footer line */
  #cj-contact-form,.cj-form-card{padding-bottom:5.25rem}
  footer>div{padding-bottom:5.5rem !important}
}

/* ===================================================================
   5 · PHONE PORTRAIT (≤767) — review fixes, 390 / 360 px
   =================================================================== */
/* Float must never sit over the full-screen menu */
body.cj-menu-open .cj-wa{display:none !important}

@media(max-width:767px){
  /* 2 · eyebrow: rule above, text flush with the H1's left edge */
  .cj-eyebrow-hero{flex-direction:column !important;align-items:flex-start !important;gap:0.6rem !important;text-wrap:balance}
  /* 3 · hero scrim: darker lower third so the display subtitle keeps contrast */
  [style*="rgba(12,14,18,0.6) 0%"]{background:linear-gradient(180deg,rgba(12,14,18,0.52) 0%,rgba(12,14,18,0.34) 30%,rgba(12,14,18,0.80) 62%,rgba(12,14,18,0.94) 100%) !important}
  /* 5 · lot ownership radios: 44px rows, one per line */
  .cj-radio-row{flex-direction:column !important;gap:0.25rem !important}
  .cj-radio-row>label{min-height:44px;padding:0.35rem 0;gap:0.75rem !important}
  .cj-radio-row input[type="radio"]{width:20px !important;height:20px !important}
  /* 6 · footer link rows: touchable */
  footer nav a,footer ul a,footer li a,footer .cj-grid2 a[href$=".html"]{min-height:40px;display:flex !important;align-items:center}
  footer .cj-grid2>div:nth-child(5) a{display:block !important}
  /* hero subtitle: one line on a phone (EN measure fits at 4.05vw) */
  html[lang="en"] main [style*="max-width:32ch"]{max-width:none !important;white-space:nowrap;font-size:min(1.05rem,4.05vw) !important}
  html[lang="es"] main [style*="max-width:32ch"]{max-width:22ch !important;text-wrap:balance}
  /* section headers: every eyebrow + H2 pair sits on the same left edge */
  main section div[style*="text-align:center"]:has(>h2){text-align:left !important;margin-left:0 !important;margin-right:0 !important}
  main section div[style*="text-align:center"]:has(>h2)>.cj-eyebrow-hero{align-items:flex-start !important}
  /* 1 · safe bottom clearance wherever a block ends with a full-width button,
     so the float can never land on a control */
  main section div:has(>.cj-btn):last-child{padding-bottom:4.5rem}
  main section>div:last-child>div:has(>.cj-btn){padding-bottom:4.5rem}
  /* 7 · button pairs: stacked, full width, equal height */
  main div:has(>.cj-btn){gap:0.75rem !important}
  .cj-btn{min-height:52px;padding:1rem 1.35rem !important;text-align:center;white-space:normal;line-height:1.25 !important}
  main a[href*="wa.me"]:not(.cj-wa):not(.cj-topbar-wa){width:100% !important;max-width:460px;justify-content:center !important;min-height:52px;box-sizing:border-box}
  /* 8 · project spec rows: label above, value below, left aligned */
  .cj-spec-row{flex-direction:column !important;align-items:flex-start !important;gap:0.3rem !important;padding:0.95rem 0 !important}
  .cj-spec-row>span:last-child{text-align:left !important}
}

/* Hero subtitle (EN): always one line */
html[lang="en"] main [style*="max-width:32ch"]{max-width:none !important;white-space:nowrap}

/* 4 · subscribe checkbox — visible control on the dark theme, all widths */
.cj-check-wrap input[type="checkbox"]{
  width:20px !important;height:20px !important;
  border:1px solid var(--slate-300) !important;
  background:var(--surface-raised) !important;
}
.cj-check-wrap>span:first-child{margin-top:0 !important;align-items:center}
.cj-check-wrap{align-items:center !important;min-height:44px}
.cj-check-wrap input[type="checkbox"]:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}

/* 6 · footer logo and social row share width + left edge at every width */
footer .cj-grid2>div:first-child>img,
footer .cj-grid2>div:first-child>div{width:min(224px,62vw) !important;margin-left:0 !important}

/* ---- Long-form article body: H3s, tables, lists (blog template) ---- */
.cj-prose h2{font-family:var(--font-display);font-weight:300;font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.15;color:var(--text-primary);margin:2.75rem 0 1rem}
.cj-prose h3{font-family:var(--font-heading);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.3;letter-spacing:0.01em;color:var(--text-primary);margin:2rem 0 0.75rem}
.cj-prose h3::after{content:"";display:block;width:44px;height:2px;background:var(--gold-500);margin-top:0.6rem}
.cj-prose ul,.cj-prose ol{font-family:var(--font-body);font-size:1.0625rem;line-height:1.9;color:var(--text-secondary);margin:0 0 1.5rem;padding-left:1.15rem}
.cj-prose li{margin-bottom:0.5rem}
.cj-prose blockquote{margin:2rem 0;padding-left:1.25rem;border-left:2px solid var(--gold-500);font-family:var(--font-display);font-weight:300;font-size:1.25rem;line-height:1.5;color:var(--text-primary)}
/* Tables scroll horizontally on their own, inside the 720px measure */
.cj-table-wrap{margin:2rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border-hairline);border-radius:var(--radius-xs)}
.cj-prose table{border-collapse:collapse;width:100%;min-width:520px;font-family:var(--font-body);font-size:0.9375rem;color:var(--text-secondary)}
.cj-prose th{font-family:var(--font-label);font-size:0.625rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-tertiary);text-align:left;padding:0.85rem 1rem;border-bottom:1px solid var(--border-hairline);white-space:nowrap}
.cj-prose td{padding:0.85rem 1rem;border-bottom:1px solid var(--border-hairline);vertical-align:top}
.cj-prose tr:last-child td{border-bottom:0}
.cj-prose td:first-child{color:var(--text-primary)}

/* 29 sept 2026: correcciones de celular (títulos con botón alineados a la izquierda; fotos que llenan su marco) */
@media (max-width:767px){main div[style*="align-items:flex-end"]:has(> .cj-btn){align-items:stretch !important}}
@media (max-width:1000px){main [style*="grid-template-columns:"][style*="fr "] [style*="aspect-ratio"] > img,main [style*="grid-template-columns:"][style*="fr "] img[style*="position:absolute"]{height:100% !important;max-height:none}}


/* 5 · subscribe checkbox: checked state visible (the rule above was overriding the gold fill) */
.cj-check-wrap input[type="checkbox"]:checked{background:var(--gold-500) !important;border-color:var(--gold-500) !important}