/* Broadsheet — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #0088b0;
  --color-accent-2: #d6006c;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-300: #99e0ff;
  --color-accent-400: #62c5ee;
  --color-accent-500: #38a6cf;
  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-800: #004961;
  --color-accent-900: #0a303e;

  --color-accent-2-100: #fff1f4;
  --color-accent-2-200: #ffdee6;
  --color-accent-2-300: #ffc0d0;
  --color-accent-2-400: #ff90b1;
  --color-accent-2-500: #ff458e;
  --color-accent-2-600: #d82071;
  --color-accent-2-700: #aa0b56;
  --color-accent-2-800: #790e3d;
  --color-accent-2-900: #4b1528;

  /* The third process ink — review round 3: the deck's print treatments
     (the CMYK separation and the misregistered plate numerals below) need
     the full four-color set. Cyan and magenta are the system's own accents;
     this yellow completes them, muted to the same press-ink register. A
     print treatment color, not an interface accent — body copy and chrome
     never take it. */
  --color-process-yellow: #edbb00;

  --font-heading: "Source Serif 4", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Source Serif 4", system-ui, sans-serif;

  --space-1: 5.0px;
  --space-2: 10.0px;
  --space-3: 15.0px;
  --space-4: 20.0px;
  --space-6: 30.0px;
  --space-8: 40.0px;

  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.halftone{position:relative;filter:grayscale(0.35) contrast(1.15);overflow:hidden}
.halftone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(0,0,0,0.22) 30%,transparent 32%);
  background-size:3px 3px;mix-blend-mode:multiply}

/* The four-color separation treatment (review round 3) — a photograph
   printed as its misregistered process plates, after the Catalogue Three
   grammar. Markup: a figure.cmyk holding five copies of the image — the
   first is the layout sizer (hidden), then one per plate, each tagged
   .sep-c/.sep-m/.sep-y/.sep-k. The plates are extracted live by the SVG
   feColorMatrix filters in the host page (copy the defs block from
   templates/deck/index.html — a data-URI filter reference would not
   survive Chromium), nudged a few pixels out of register, and multiplied
   onto the paper ground; the halftone dot screens the recombined print.
   The plate offsets live with the deck's projection-scale CSS, since
   misregistration is sized to the output. */
.cmyk{position:relative;overflow:hidden;background:var(--color-bg)}
.cmyk img:first-child{opacity:0} /* layout sizer AND the alt-bearing image — opacity
  keeps it in the accessibility tree (visibility:hidden would drop the figure's only
  description); fully transparent, it adds nothing to the multiply backdrop */
.cmyk img+img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.cmyk .sep-c{filter:url(#sep-c)}
.cmyk .sep-m{filter:url(#sep-m)}
.cmyk .sep-y{filter:url(#sep-y)}
.cmyk .sep-k{filter:url(#sep-k)}
.cmyk::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(0,0,0,0.22) 30%,transparent 32%);
  background-size:3px 3px;mix-blend-mode:multiply}

/* The plate numeral (review rounds 3-4) — display figures set as
   misregistered process plates, the catalog's cover grammar. Review
   round 4 (Barron): THREE plates — C, M, Y only, no black plate — so the
   dark core comes entirely from the C×M×Y multiply overlap (the inks
   product to exact black), with the fringes the registration drift; and
   the spread pulled in by half (less jumbled: one figure with plate
   fringes rather than figures sliding apart). Markup: a .cmyk-num holding
   a .paper span (the white of the sheet: the glyph's union, built from
   offset text-shadow copies) and three .plate spans. The construction
   carries its own ground (--cmyk-num-ground, defaulting to paper) painted
   on its padding box, so the multiply plates always have their backdrop
   even inside an isolated stacking context (entrance animations); the
   padding bleeds wider than any plate offset and the negative margin
   hands the layout box back. Offsets are em-scaled to the glyph. The
   .paper span carries the text once for assistive tech; the .plate spans
   are aria-hidden repeats. */
.cmyk-num{--cmyk-num-ground:var(--color-bg);
  position:relative;width:fit-content;line-height:0.9;
  font-feature-settings:"pnum" 1;
  background:var(--cmyk-num-ground);padding:0.12em;margin:-0.12em}
.cmyk-num .paper{color:var(--color-bg); /* the white of the sheet — always paper,
  whatever the ground: the plates read as printed on paper even when the
  surrounding page is ink */
  text-shadow:0.036em 0.025em 0 var(--color-bg),-0.031em -0.023em 0 var(--color-bg)}
.cmyk-num .plate{position:absolute;inset:0.12em;mix-blend-mode:multiply;
  text-box:trim-both cap alphabetic /* the host trims to its cap box; each
  absolute plate must trim its own line the same way, or its glyphs sit a
  half-leading below the paper union */}
.cmyk-num .plate-c{color:var(--color-accent)}
.cmyk-num .plate-m{color:var(--color-accent-2);translate:0.036em 0.025em}
.cmyk-num .plate-y{color:var(--color-process-yellow);translate:-0.031em -0.023em}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: calc(var(--space-2) * 0.85) var(--space-3);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 34px; height: 34px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — QR links (page "Agenda una visita") — the QR codes are wrapped in real
   links so a visitor already on their phone can tap straight to Maps/WhatsApp
   instead of needing a second device to scan them. */
.qr-link { display: block; text-decoration: none; color: inherit; transition: opacity 0.15s ease; }
.qr-link:hover { opacity: 0.8; }
.qr-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* — visually-hidden — content stays in the DOM (readable by screen readers,
   crawlers and AI agents) but is clipped out of the visual layout. Used for
   section headings that already have an obvious visual equivalent (a photo
   grid, a map) but nothing on-page names in text. Not display:none, which
   would pull it out of the accessibility tree too. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* — FAQ (page "Preguntas frecuentes") — native <details>/<summary>, no JS. */
.faq-item { border-bottom: 1px solid var(--color-divider); padding-bottom: 12px; }
.faq-item summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; letter-spacing: -0.005em; line-height: 1.4;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; font-weight: 400; color: var(--color-accent-700);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.faq-item p {
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.faq-item ul {
  margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.faq-item li + li { margin-top: 2px; }

/* — WhatsApp FAB — fixed to the viewport (not the sheet layout), so it sits
   above every page regardless of scroll position. env(safe-area-inset-*)
   keeps it clear of the home-indicator/notch area on iOS; the plain 16px
   falls back on browsers without safe-area support. */
.whatsapp-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  z-index: 1000;
  transition: transform 0.15s ease;
}
.whatsapp-fab img { width: 100%; height: 100%; display: block; }
.whatsapp-fab:hover { transform: scale(1.06); }
.whatsapp-fab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 50%; }

/* — status badge (page "Portada") — shows whether the local is currently
   Disponible / Apartado / Rentado. Color alone never carries the meaning
   (each state also has its own text), and each state's background/text pair
   is a pre-checked WCAG AA combination (>=4.5:1). Sharp corners (--radius-md)
   keep it in the same editorial/print language as the rest of the page
   instead of a rounded "app" pill.
   To change status: swap the `status-badge--*` modifier class AND the
   visible label text below — nothing else on the page needs to change. */
.status-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 9px; border-radius: var(--radius-md);
  font-family: var(--font-heading); font-weight: 600;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.status-badge__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.status-badge--disponible { background: #dafbe1; color: #196c2e; }
.status-badge--disponible .status-badge__dot { background: #196c2e; }
.status-badge--apartado { background: #fff3c4; color: #7a5200; }
.status-badge--apartado .status-badge__dot { background: #7a5200; }
.status-badge--rentado { background: #ffdedb; color: #a01d10; }
.status-badge--rentado .status-badge__dot { background: #a01d10; }

/* ══════════════════════════════════════════════════════════════════════════
   Responsive — mobile & tablet.
   The page above is a set of fixed 850×1100px "sheets" (the brochure/print
   layout) and is left as the desktop experience, untouched. Everything below
   only kicks in at narrower viewports. Because the layout is built with
   inline styles (each "sheet" is a design export), overriding it from an
   external stylesheet requires !important — a normal inline declaration
   otherwise wins over any external rule regardless of selector specificity.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  [data-print-wrapper] { padding: 32px 16px !important; gap: 32px !important; }
  [data-screen-label] { width: 100% !important; max-width: 640px; height: auto !important; }

  /* The "0X · Inmobiliaria Ensigna" folio in each sheet's corner is
     absolutely positioned against the sheet's fixed 1100px desktop height.
     Once a sheet's height goes auto to reflow on narrower screens, that
     absolute label has no reserved space and overlaps the last line of
     content — so it's hidden here rather than chasing padding math on six
     different layouts. It's a print-pagination artifact, not information
     unique to that sheet (the brand name is already prominent elsewhere). */
  [data-screen-label] > div:last-child { display: none !important; }

  /* Page 1 — Portada */
  .hero-media { height: 62vw !important; max-height: 480px !important; }
  .hero-caption { left: 24px !important; right: 24px !important; bottom: 20px !important; }
  h1 { font-size: 30px !important; }
  [data-screen-label="01 — Portada"] > div:nth-child(2) { padding: 24px 24px 26px !important; }
  [data-screen-label="01 — Portada"] .card.elev-md { padding: 16px 22px !important; gap: 20px !important; }
  .feature-row { flex-wrap: wrap !important; gap: 12px 22px !important; }

  /* Page 2 — Menos inversión inicial */
  .split-row { flex-direction: column !important; }
  .split-row .halftone { width: 100% !important; height: 260px !important; }
  .split-row > div:last-child { padding: 28px 24px !important; }
  .split-row h2 { font-size: 22px !important; }

  /* Page 3 — Ubicación */
  .map-block { height: 300px !important; }
  /* nth-child(3): the sr-only <h2> is child 1 (out of flow, but still counts
     for :nth-child), .map-block is child 2, this content div is child 3. */
  [data-screen-label="03 — Ubicación"] > div:nth-child(3) { padding: 24px 24px 20px !important; }

  /* Page 4 — Croquis */
  [data-screen-label="04 — Croquis"] > div:nth-child(1) { padding: 28px 24px 0 !important; }
  /* flex:1 with no explicit height (inherited from the inline style) only
     resolves against the sheet's fixed 1100px desktop height; once the sheet
     goes auto, the image's max-height:100% has nothing definite to resolve
     against and renders at full natural size. Giving the frame an explicit
     height fixes that, the same way .photo-tall/.photo-row/.map-block do. */
  .sketch-frame { flex: none !important; height: 340px !important; padding: 16px 20px !important; }
  [data-screen-label="04 — Croquis"] h2 { font-size: 22px !important; }

  /* Page 5 — Imágenes */
  .photo-tall { flex: none !important; height: 260px !important; }
  .photo-row { flex: none !important; height: 200px !important; }

  /* Page 6 — Preguntas frecuentes */
  [data-screen-label="06 — Preguntas frecuentes"] > div:first-child { padding: 28px 24px 0 !important; }
  [data-screen-label="06 — Preguntas frecuentes"] h2 { font-size: 22px !important; }
  .faq-list { padding: 24px 24px 32px !important; }

  /* Page 7 — Agenda una visita */
  [data-screen-label="07 — Agenda una visita"] > div:nth-child(2) { padding: 32px 24px !important; gap: 22px !important; }
  [data-screen-label="07 — Agenda una visita"] h2 { font-size: 30px !important; }
  .contact-card { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; padding: 24px !important; }
}

@media (max-width: 600px) {
  [data-print-wrapper] { padding: 20px 10px !important; gap: 20px !important; }
  .hero-media { height: 68vw !important; }
  h1 { font-size: 24px !important; }
  .stat-value { font-size: 22px !important; }
  [data-screen-label="01 — Portada"] .card.elev-md { padding: 14px 16px !important; gap: 16px !important; }
  .feature-row span { font-size: 13px !important; }

  .map-block { height: 220px !important; }
  .sketch-frame { height: 280px !important; }
  .icon-grid { grid-template-columns: repeat(2, 1fr) !important; }

  [data-screen-label="07 — Agenda una visita"] h2 { font-size: 26px !important; }
  .qr-group { gap: 14px !important; }
  .qr-group img { width: 92px !important; height: 92px !important; }

  [data-screen-label="06 — Preguntas frecuentes"] h2 { font-size: 22px !important; }
  .faq-item summary { font-size: 14.5px !important; }
}