/* =============================================
   RANCHO LOS POTRILLOS: SITE THEME (2026-10 redesign)
   Direction: Dos Palomas Ranch (lead) + Rancho Las Lomas.
   Warm greige paper, light serif display in spaced capitals, a script word
   above key headings, small tracked sans labels, one outline button style,
   rounded photography, generous space.

   Loads after style.css (home) and landing.css (service pages), so it wins
   ties on equal specificity. Rules that must beat cta.css (which some pages
   link later) are prefixed with `body`.
   ============================================= */

:root {
  --paper:   #efe8e1;   /* page */
  --paper-2: #e6ddd3;   /* alternating band */
  --card:    #f6f1eb;   /* raised card on paper */
  --ink:     #34302c;   /* body text: 11.4:1 on --paper */
  --ink-2:   #6f655c;   /* secondary text: 4.9:1 on --paper */
  --saddle:  #7a4c30;   /* script, links, accents: 5.3:1 on --paper-2 */
  --gold:    #a8863c;   /* hairlines only */
  --night:   #241912;   /* dark bands, footer */
  --night-2: #2e2018;
  --cream:   #f5efe6;   /* text on night */
  --serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --sans:   'Jost', 'Helvetica Neue', Arial, sans-serif;
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 14px;

  /* Legacy tokens re-pointed so untouched rules in style.css / landing.css follow the theme. */
  --brown-dark: var(--night);
  --text-dark: var(--ink);
  --text-mid: var(--ink-2);
  --gold-text: var(--saddle);
  --section-light-bg: var(--paper);
  --section-dark-bg: var(--night);
  --focus-ring: 2px solid var(--saddle);
}

html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--saddle); color: var(--cream); }
:focus-visible { outline: 2px solid var(--saddle); outline-offset: 4px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }

/* ---------- shared pieces ---------- */
.script {
  display: block;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--saddle);
  margin-bottom: 0.12em;
  text-transform: none;
  letter-spacing: 0;
}
.display {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.02;
  font-size: clamp(2.4rem, 6.4vw, 5rem);
  color: var(--ink);
}
.btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 30px;
  font-family: var(--sans); font-weight: 500; font-size: 0.8rem;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); border: 1px solid var(--ink); background: transparent;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* Reveal: visible by default; script.js adds .js-reveal only when motion is allowed. */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* ---------- navbar (home + service pages) ---------- */
#navbar {
  background: linear-gradient(to bottom, rgba(20, 12, 6, 0.62), rgba(20, 12, 6, 0));
  border-bottom: 0;
  box-shadow: none;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
#navbar.scrolled {
  background: rgba(36, 25, 18, 0.97);
  box-shadow: 0 1px 0 rgba(168, 134, 60, 0.35);
}
#navbar .nav-links a,
#navbar .nav-links li > a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.92);
}
#navbar .nav-links a:hover { color: #fff; }
#navbar .lang-btn,
.lang-toggle-group .lang-btn {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  border: 1px solid rgba(245, 239, 230, 0.6);
  color: var(--cream);
  background: transparent;
  border-radius: 0;
}
#navbar .lang-btn:hover,
.lang-toggle-group .lang-btn:hover { background: var(--cream); color: var(--night); }
.lang-toggle-group .lang-btn[aria-current="true"],
.lang-toggle-group .lang-btn.active { background: var(--cream); color: var(--night); border-color: var(--cream); }
@media (max-width: 700px) {
  #navbar .nav-links { background: rgba(36, 25, 18, 0.98); }
}

/* ---------- home: hero ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  max-height: 980px;
  padding: 0;
  overflow: hidden;
  background: var(--night);
  display: block;
}
.hero-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s var(--ease); }
.hero-slide.on { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 7s linear; }
.hero-slide.on img { transform: scale(1); }
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,12,6,0.55) 0%, rgba(20,12,6,0.15) 18%, rgba(20,12,6,0) 34%, rgba(20,12,6,0) 70%, rgba(20,12,6,0.45) 100%);
}
.hero-place {
  position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 2; margin: 0;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(245, 239, 230, 0.92); white-space: nowrap;
}
.hero-dots { position: absolute; right: clamp(18px, 4vw, 48px); bottom: 26px; z-index: 2; display: flex; gap: 4px; }
.hero-dots button { width: 32px; height: 32px; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
.hero-dots button::before { content: ''; width: 18px; height: 1px; background: rgba(245,239,230,0.55); transition: background 0.3s, width 0.3s; }
.hero-dots button[aria-current="true"]::before { background: #fff; width: 26px; }
@media (prefers-reduced-motion: reduce) { .hero-slide, .hero-slide img { transition: none; } }

/* ---------- home: welcome ---------- */
.welcome { text-align: center; padding: clamp(80px, 12vw, 150px) 24px clamp(70px, 10vw, 120px); background: var(--paper); }
.welcome h1 { margin: 0 0 34px; font-weight: 300; }
.welcome .rule { width: 60px; height: 1px; background: var(--gold); margin: 0 auto 34px; }
.welcome .lede { max-width: 38rem; margin: 0 auto; font-weight: 300; font-size: 1.28rem; color: var(--ink); }
.welcome .lede em { font-style: italic; color: var(--saddle); }
.welcome-cta { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.welcome-note { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--ink-2); }

/* ---------- home: full-bleed band ---------- */
.band { height: clamp(320px, 62vw, 720px); overflow: hidden; }
.band img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- home: the ranch, one photo + one paragraph per space ---------- */
.spaces { padding: clamp(80px, 11vw, 140px) clamp(20px, 5vw, 64px) clamp(20px, 4vw, 40px); max-width: 1180px; margin: 0 auto; }
.spaces-head { text-align: center; margin-bottom: clamp(56px, 8vw, 96px); }
.spaces-head .display, .celebra .display { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.space {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 6vw, 88px); align-items: center;
  margin-bottom: clamp(64px, 9vw, 120px);
  scroll-margin-top: 90px;
}
.space:nth-of-type(even) .space-photo { order: 2; }
.space-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-2); }
.space-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.space:hover .space-photo img { transform: scale(1.03); }
/* Tall portrait (the horse in its stall): show the whole animal, never crop. */
.space-photo--whole { aspect-ratio: auto; position: relative; display: grid; place-items: center; isolation: isolate; }
.space-photo--whole::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--bg) center / cover no-repeat; filter: blur(22px) brightness(0.6); transform: scale(1.15);
}
.space-photo--whole img { width: auto; height: auto; max-width: 100%; max-height: min(82vh, 760px); object-fit: contain; }
.space:hover .space-photo--whole img { transform: none; }
.space-label { display: block; margin-bottom: 14px; font-family: var(--sans); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-2); }
.space-text h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.05; margin: 0 0 20px; color: var(--ink); }
.space-text p { font-weight: 300; max-width: 30rem; color: var(--ink); margin: 0; }
.space-more { display: inline-block; margin-top: 22px; }
.space-more a {
  display: inline-block; padding: 10px 0;
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--saddle); text-decoration: none; border-bottom: 1px solid currentColor;
}

/* ---------- home: celebrations ---------- */
.celebra { background: var(--paper-2); padding: clamp(80px, 10vw, 130px) clamp(20px, 5vw, 64px); text-align: center; }
.celebra h2 { margin: 0 0 clamp(44px, 6vw, 72px); font-weight: 300; }
.cards { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); max-width: 1180px; }
.card a { display: block; text-decoration: none; color: var(--ink); }
.card .ph { display: block; border-radius: 999px 999px var(--radius) var(--radius); overflow: hidden; aspect-ratio: 3 / 4; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.card a:hover img { transform: scale(1.04); }
.card-title { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; margin-top: 22px; }
.card-more { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--saddle); }

/* ---------- home: facts ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1080px; margin: 0 auto; padding: clamp(64px, 8vw, 100px) 24px; text-align: center; }
.facts div { padding: 6px 18px; border-left: 1px solid rgba(168, 134, 60, 0.45); }
.facts div:first-child { border-left: 0; }
.facts strong { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.1; color: var(--ink); }
.facts span { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- contact (home) + closing CTA band (service pages) ---------- */
.contact-section,
.landing-cta {
  background: var(--night);
  color: var(--cream);
}
.contact-section::before { display: none; }
.contact-inner h2,
.landing-cta h2 {
  font-family: var(--serif); font-weight: 300; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; color: var(--cream);
}
.contact-inner .section-label,
.section-label {
  font-family: var(--script); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  letter-spacing: 0; text-transform: none; color: #e3cfa6;
}
.contact-inner > p, .landing-cta p { font-weight: 300; color: rgba(245, 239, 230, 0.9); }
body .quote-block {
  background: var(--night-2);
  border: 1px solid rgba(168, 134, 60, 0.4);
  border-radius: var(--radius);
  box-shadow: none;
}
body .quote-title { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; color: var(--cream); }
body .quote-intro, body .quote-note { font-family: var(--sans); color: rgba(245, 239, 230, 0.78); }
body .quote-field label { font-family: var(--sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245, 239, 230, 0.85); }
body .quote-field input,
body .quote-field select {
  font-family: var(--sans); background: var(--cream); color: var(--ink);
  border: 1px solid rgba(168, 134, 60, 0.55); border-radius: 2px;
}
body .quote-submit {
  font-family: var(--sans); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.8rem;
  border-radius: 2px; box-shadow: none;
}
.contact-name { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--cream); }
body .whatsapp-btn, body .btn-whatsapp, body .phone-btn {
  font-family: var(--sans); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8rem;
  border-radius: 2px; box-shadow: none;
}
body .phone-btn { background: transparent; color: var(--cream); border: 1px solid rgba(245, 239, 230, 0.7); }
body .phone-btn:hover { background: var(--cream); color: var(--night); }

/* ---------- FAQ (home + service pages): quiet list on paper ---------- */
.faq-section,
.landing-faq { background: var(--paper); color: var(--ink); }
.faq-inner h2,
.landing-faq h2 {
  font-family: var(--serif); font-weight: 300; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(2rem, 4.4vw, 3.2rem); color: var(--ink);
}
.faq-section .section-label { color: var(--saddle); }
.faq-item { border-bottom: 1px solid rgba(168, 134, 60, 0.4); }
.faq-item dt { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; color: var(--ink); }
.faq-item dd { font-family: var(--serif); font-weight: 300; font-size: 1.15rem; color: var(--ink); }

/* ---------- footer (home + service pages) ---------- */
.footer, .landing-footer { background: var(--night); border-top: 1px solid rgba(168, 134, 60, 0.35); }
.footer-links a, .landing-footer .landing-footer-links a { font-family: var(--sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.2em; color: rgba(245, 239, 230, 0.85); }
.footer-copy, .footer-accessibility, .landing-footer p { font-family: var(--sans); }

/* ---------- service pages ---------- */
.landing-hero { min-height: 64vh; }
.landing-hero h1 {
  font-family: var(--serif); font-weight: 300; text-transform: none; letter-spacing: 0.01em;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1.06;
}
.landing-hero-overlay { background: linear-gradient(to bottom, rgba(20,12,6,0.55) 0%, rgba(20,12,6,0.72) 100%); }
.landing-hero-overlay--light { background: linear-gradient(to bottom, rgba(20,12,6,0.32) 0%, rgba(20,12,6,0.62) 100%); }
.landing-hero .hero-sub { font-family: var(--serif); font-weight: 300; font-size: 1.25rem; letter-spacing: 0.01em; }
.landing-content { background: var(--paper); color: var(--ink); }
.landing-content h2 {
  font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4.2vw, 3rem); color: var(--ink);
  border: 0;
}
.landing-content p { font-weight: 300; color: var(--ink); }
.landing-content .svc-intro { font-size: 1.3rem; color: var(--ink); }
.svc-highlight {
  background: var(--card); border: 1px solid rgba(168, 134, 60, 0.35); border-radius: var(--radius);
}
.svc-highlight strong { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; color: var(--ink); }
.svc-highlight span { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-2); }
.svc-card { background: var(--card); border: 1px solid rgba(168, 134, 60, 0.3); border-radius: var(--radius); box-shadow: none; }
.svc-card > h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--ink); border-bottom-color: rgba(168, 134, 60, 0.45); }
.svc-card > ul > li, .svc-card > ol > li { font-family: var(--serif); font-size: 1.12rem; color: var(--ink); }
.svc-card--checks > ul:not(.svc-chips) > li::before { color: var(--saddle); }
.svc-card--steps > ol > li::before { background: var(--saddle); color: var(--cream); font-family: var(--sans); }
.svc-card--dark { background: var(--night); border-color: transparent; }
.svc-card--dark > h3 { color: var(--cream); }
.svc-card--dark > ul > li, .landing-content .svc-card--dark > p { color: rgba(245, 239, 230, 0.92); }
.svc-chips li { font-family: var(--sans); font-size: 0.8rem; background: var(--card); border: 1px solid rgba(168, 134, 60, 0.4); color: var(--ink); border-radius: 999px; }
.landing-content .svc-story p { font-family: var(--serif); color: var(--saddle); font-size: 1.3rem; }
.svc-story { border-left-color: var(--gold); }
.svc-gallery img, .svc-gallery video { border-radius: 10px; }
.stable-card { background: var(--card); border: 1px solid rgba(168, 134, 60, 0.3); border-radius: var(--radius); }
.stable-card h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.stable-card li { font-family: var(--serif); font-size: 1.12rem; color: var(--ink); }

/* ---------- mobile sticky bar + offer widgets ---------- */
body .cta-bar { background: rgba(36, 25, 18, 0.98); border-top: 1px solid rgba(168, 134, 60, 0.5); }
body .cta-bar-btn { font-family: var(--sans); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; border-radius: 2px; }
body .cta-bar-call { border-width: 1px; color: var(--cream); border-color: rgba(245, 239, 230, 0.7); }
#promo-widget, #bundle-widget { background: rgba(36, 25, 18, 0.97); border-color: rgba(168, 134, 60, 0.6); border-radius: 4px; font-family: var(--sans); }
#promo-tab, #bundle-tab { font-family: var(--sans); background: rgba(36, 25, 18, 0.97); }
#promo-tab .tab-pct, #bundle-tab .tab-pct { font-family: var(--serif); font-weight: 500; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .space { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .space:nth-of-type(even) .space-photo { order: 0; }
  .space-text p { margin: 0 auto; }
  .space-photo { aspect-ratio: 4 / 3; }
  .space-photo--whole { aspect-ratio: auto; }
  .cards { grid-template-columns: 1fr; max-width: 420px; }
  .card .ph { aspect-ratio: 4 / 4.4; }
  .facts { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .facts div:nth-child(3) { border-left: 0; }
  .hero-place { letter-spacing: 0.2em; font-size: 0.68rem; }
}

/* ---------- audit 3 (2026-10-18) ---------- */
/* Leftover old-system type: offer cards, 404 buttons, skip link. */
.promo-heading { font-family: var(--serif) !important; font-weight: 500; }
#promo-widget, #bundle-widget,
#promo-widget button, #bundle-widget button,
#promo-widget a, #bundle-widget a { font-family: var(--sans); }
.skip-link { font-family: var(--sans); }
.not-found-hero .error-code { font-family: var(--serif); font-weight: 300; color: var(--ink); }
.btn-primary, .btn-secondary {
  font-family: var(--sans); font-weight: 500; letter-spacing: 0.18em; border-radius: 2px;
}
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--saddle); border-color: var(--saddle); color: var(--cream); }

/* Comfortable reading measure (~68 characters) for running text. */
.landing-content > p,
.landing-content .svc-intro,
.landing-content .svc-story p,
.landing-faq .faq-item dd,
.faq-section .faq-item dd,
.contact-inner > p,
.landing-cta p { max-width: 68ch; }
.contact-inner > p, .landing-cta p { margin-left: auto; margin-right: auto; }

/* Menu links: taller tap targets where the bar is inline (tablets and up). */
@media (min-width: 701px) {
  #navbar .nav-links a { padding-top: 10px; padding-bottom: 10px; }
}
#navbar .lang-divider { color: rgba(245, 239, 230, 0.55); }
/* 404 popular-page links: 44px tap targets. */
.not-found-popular ul li a { display: inline-block; padding: 12px 4px; }
.footer-accessibility { max-width: 25rem; margin-left: auto; margin-right: auto; } /* small type: ch undercounts, keep under ~80 chars */
/* Menu 'Contacto' jumps to each page's own contact block; clear the fixed bar. */
.landing-cta, .contact-section { scroll-margin-top: 80px; }
/* Seven menu links + ES|EN on one line from tablet up: never wrap a label,
   and tighten tracking where the bar gets crowded. */
#navbar .nav-links a { white-space: nowrap; }
@media (min-width: 701px) and (max-width: 1279px) {
  #navbar .nav-links a,
  #navbar .nav-links li > a { letter-spacing: 0.1em; font-size: 0.68rem; padding-left: 7px; padding-right: 7px; }
  #navbar .nav-inner { padding-left: 14px; padding-right: 14px; }
}
/* Tablets 701–860px: seven links + ES|EN overflow the bar (Spanish by up to
   135px), so use the menu button here too. Mirrors style.css's phone menu. */
@media (min-width: 701px) and (max-width: 860px) {
  #navbar .hamburger { display: block; }
  #navbar .nav-links {
    display: none; flex-direction: column; position: absolute;
    top: var(--nav-height); left: 0; right: 0;
    background: rgba(36, 25, 18, 0.98); padding: 20px 0; gap: 4px;
    border-bottom: 1px solid rgba(168, 134, 60, 0.5);
  }
  #navbar .nav-links.open { display: flex; }
  #navbar .nav-links a { font-size: 0.85rem; letter-spacing: 0.16em; padding: 12px 28px; }
}
/* Link from a service page to its planning checklist. */
.landing-content .svc-guide-link { margin: -12px 0 36px; }
.svc-guide-link a {
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--saddle); text-decoration: none; border-bottom: 1px solid currentColor; padding: 10px 0; display: inline-block;
}
.svc-guide-link a::after { content: ' \2192'; }