/* Cacaguate — visual system refresh (2026) */
:root {
  --bg: #f7f6f2;
  --bg-white: #ffffff;
  --bg-gray: #efeee9;
  --tx: #1d201d;
  --tx-2: #44463f;
  --tx-muted: #62665d;
  --gold: #a87726;
  --gold-lt: #d9ab58;
  --gold-dk: #795116;
  --b-lt: rgba(29, 32, 29, .10);
  --b-lt2: rgba(29, 32, 29, .18);
  --sh-sm: 0 10px 28px rgba(27, 32, 27, .07);
  --sh-md: 0 20px 54px rgba(27, 32, 27, .10);
  --sh-lg: 0 30px 90px rgba(27, 32, 27, .15);
  --shadow-sm: var(--sh-sm);
  --b-light: var(--b-lt);
  --ease-apple: cubic-bezier(.2, .8, .2, 1);
  --container: 1240px;
  --container-wide: 1480px;
  --sp-24: 10rem;
}

body { letter-spacing: -.008em; }
body::selection { background: rgba(168, 119, 38, .22); color: var(--tx); }
section, .section, .services, .portfolio-preview, .testimonials, .contact-section, .cta-section { scroll-margin-top: calc(var(--nav-h) + 2rem); }
.section, .services, .portfolio-preview, .testimonials, .contact-section, .cta-section { padding-block: clamp(5.5rem, 10vw, 10rem); }
.section-header { max-width: 760px; margin-inline: auto; margin-bottom: clamp(2.75rem, 5vw, 5rem); }
.section-header__desc, .page-header__desc { font-size: clamp(1.05rem, 1.4vw, 1.24rem); }
.eyebrow { color: var(--gold-dk); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
h1, .h1 { letter-spacing: -.055em; font-weight: 800; }
h2, .h2 { letter-spacing: -.045em; font-weight: 750; }

.btn { min-height: 48px; padding: .8rem 1.35rem; border-radius: 14px; font-weight: 750; letter-spacing: -.02em; box-shadow: none; }
.btn--lg { min-height: 58px; padding: 1rem 1.7rem; }
.btn--sm { min-height: 38px; padding: .5rem 1rem; }
.btn--primary { background: var(--tx); box-shadow: 0 10px 24px rgba(29, 32, 29, .18); }
.btn--primary::before { background: linear-gradient(135deg, #363b34, var(--tx)); }
.btn--primary:hover { box-shadow: 0 14px 30px rgba(29, 32, 29, .25); transform: translateY(-2px); }
.btn--outline-dark { border-color: var(--b-lt2); background: rgba(255,255,255,.7); }
.btn--outline-dark:hover { background: var(--bg-white); border-color: var(--tx); }
.btn--ghost { color: var(--gold-dk); }

:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid rgba(168,119,38,.72); outline-offset: 3px; }
.nav { height: 76px; }
.nav.scrolled { background: rgba(255,255,255,.78); border-bottom-color: rgba(29,32,29,.08); box-shadow: 0 8px 32px rgba(27,32,27,.05); }
.nav__inner { padding-inline: clamp(1.25rem, 4vw, 3rem); }
.nav__logo { font-weight: 850; }
.nav__logo-img { width: 38px; height: 38px; border-radius: 11px; }
.nav__link { font-weight: 650; }

.page-header { background: linear-gradient(145deg, #f0ede5 0%, #fbfaf6 58%, #f5efe4 100%); }
.page-header__title { max-width: 980px; margin-inline: auto; }
.service-card, .testimonial-card, .contact-form { border-color: var(--b-lt); box-shadow: var(--sh-sm); }
.services__grid { gap: 1px; background: var(--b-lt); border: 0; box-shadow: var(--sh-md); }
.service-card { border: 0; }
.service-card:hover { background: #fffdf8; transform: translateY(-4px); box-shadow: inset 0 3px var(--gold); }
.portfolio-item { border-radius: 20px; background: var(--tx); }
.portfolio-item__overlay { opacity: 1; background: linear-gradient(to top, rgba(16,18,16,.78), rgba(16,18,16,.04) 70%); }
.portfolio-item__info { transform: translateY(8px); transition: transform .3s var(--ease-apple); }
.portfolio-item:hover .portfolio-item__info { transform: translateY(0); }
.testimonial-card { border-radius: 20px; }
.cta-section { background: #ede7dc; }
.contact-form { border-radius: 24px; padding: clamp(1.5rem, 4vw, 3rem); }
.form-control { background: #fbfaf7; border-color: rgba(29,32,29,.14); border-radius: 12px; }
.form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(168,119,38,.14); }
.form-message[aria-live] { min-height: 1px; }
.footer { background: #151713; }

/* Pages created with the previous dark palette. */
.contact-channel { background: #fff !important; color: var(--tx) !important; border-color: var(--b-lt) !important; box-shadow: var(--sh-sm); }
.contact-channel:hover { border-color: rgba(168,119,38,.55) !important; transform: translateY(-3px); }
.contact-channel__label, .hours-day { color: var(--tx-muted) !important; }
.hours-time, .contact-channel__value { color: var(--tx) !important; }
.map-placeholder { background: #ede7dc !important; color: var(--tx) !important; }
.filter-btn { border-radius: 999px; border: 1px solid var(--b-lt); background: #fff; color: var(--tx); padding: .55rem 1rem; font-weight: 700; }
.filter-btn.active, .filter-btn:hover { background: var(--tx); color: #fff; border-color: var(--tx); }

@media (max-width: 1023px) {
  :root { --sp-24: 6rem; }
  .section, .services, .portfolio-preview, .testimonials, .contact-section, .cta-section { padding-block: 6rem; }
  .nav { height: 68px; }
  /* Inline desktop grids on the about page need an explicit mobile fallback. */
  main [style*="grid-template-columns:1fr 1fr"],
  main [style*="grid-template-columns:repeat(3,1fr)"],
  main [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
  main [style*="position:absolute"][style*="top:48px"] { display: none !important; }
}

/* Tablet: preserve generous rhythm while keeping dense content readable. */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { padding-inline: 2rem; }
  .page-header { min-height: 360px; display: grid; place-items: center; }
  .portfolio-full-grid { gap: 1.25rem; }
  .clients-grid { gap: 1rem; }
  .footer__top { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer__top > :last-child { grid-column: span 2; }
}

@media (max-width: 767px) {
  .section, .services, .portfolio-preview, .testimonials, .contact-section, .cta-section { padding-block: 4.5rem; }
  .btn--lg { width: 100%; justify-content: center; }
  .services__grid { border-radius: 20px; }
  .service-card { padding: 2rem 1.5rem; }
  .page-header { min-height: 290px; }
  .page-header__desc { max-width: 34rem; }
  .portfolio-full-grid, .clients-grid { gap: .875rem; }
  .filter-bar { justify-content: flex-start; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
  .filter-btn { flex: 0 0 auto; }
  .legal-content { padding-inline: 1.25rem !important; overflow-wrap: anywhere; }
  .cookie-table { display: block; overflow-x: auto; white-space: nowrap; }
  .cookie-banner { bottom: 4.75rem; max-width: none; padding: 1rem 1.25rem; }
  .whatsapp-float { width: 52px; height: 52px; padding: 0; justify-content: center; }
}

/* Small phones: no horizontal overflow and controls remain comfortably tappable. */
@media (max-width: 479px) {
  :root { --sp-3: 1.25rem; --sp-4: 1.5rem; --sp-6: 2rem; --sp-8: 2.5rem; }
  .container { padding-inline: 1rem; }
  .nav__inner { padding-inline: 1rem; }
  .nav__logo { font-size: 1.3rem; gap: .55rem; }
  .nav__logo-img { width: 34px; height: 34px; }
  .nav__mobile-link { font-size: clamp(1.65rem, 9vw, 2.15rem); }
  .hero { min-height: 680px; min-height: 100svh; }
  .hero__content { padding-inline: 1rem; }
  .hero__title { font-size: clamp(2.55rem, 13vw, 3.35rem); line-height: .98; }
  .hero__subtitle { font-size: 1rem; }
  .hero__actions, .cta-section__actions { width: 100%; }
  .hero__actions .btn, .cta-section__actions .btn { max-width: none; }
  .intro__stats, .stats-bar__inner { gap: .25rem; }
  .intro__stat-num { font-size: 2rem; }
  .stat-item { padding: 1rem .35rem; }
  .stat-item__num { font-size: clamp(2rem, 12vw, 2.65rem); }
  .stat-item__label { font-size: .68rem; line-height: 1.35; }
  .portfolio-grid { gap: .75rem; }
  .portfolio-item__overlay { padding: 1rem; }
  .portfolio-item__info h4 { font-size: 1rem; }
  .portfolio-item__info p { font-size: .78rem; }
  .contact-form { padding: 1.25rem; border-radius: 18px; }
  .contact-channel { padding: 1rem !important; gap: .875rem !important; }
  .contact-channel__icon { width: 44px !important; height: 44px !important; font-size: 1.15rem !important; }
  .contact-channel__value { font-size: 1rem !important; overflow-wrap: anywhere; }
  .form-control { padding: .8rem 1rem; }
  .footer { padding-top: 4rem; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1; justify-content: center; }
}

@media (max-width: 359px) {
  .nav__logo { font-size: 1.15rem; }
  .hero__title { font-size: 2.45rem; }
  .page-header__title { font-size: 2.35rem; }
  .btn { font-size: .95rem; }
}

/* Wide desktop: intentional whitespace rather than stretched text. */
@media (min-width: 1440px) {
  .container { padding-inline: 2rem; }
  .hero__content { max-width: 1180px; }
  .section-header__desc { max-width: 650px; }
  .contact-layout { gap: 9rem; }
  .service-card { min-height: 350px; }
  .page-header { min-height: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  [data-reveal], [data-reveal-group] > *, .lazy-img { opacity: 1 !important; transform: none !important; }
}