/* CleanPro design tokens */
:root {
  --radius: 2rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.18 0.04 250);
  --ink: oklch(0.18 0.04 250);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.04 250);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.04 250);
  --primary: oklch(0.65 0.18 230);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.96 0.02 220);
  --secondary-foreground: oklch(0.18 0.04 250);
  --soft: oklch(0.95 0.05 220);
  --soft-foreground: oklch(0.18 0.04 250);
  --muted: oklch(0.94 0.03 220);
  --muted-foreground: oklch(0.45 0.05 240);
  --accent: oklch(0.82 0.13 85);
  --accent-foreground: oklch(0.25 0.05 250);
  --lime: oklch(0.88 0.14 200);
  --destructive: oklch(0.6 0.24 27);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.18 0.04 250 / 0.10);
  --input: oklch(0.18 0.04 250 / 0.12);
  --ring: oklch(0.65 0.18 230);
  --whatsapp: oklch(0.74 0.18 148);
  --whatsapp-foreground: oklch(1 0 0);
  --shadow-soft: 0 4px 24px -12px oklch(0.18 0.04 250 / 0.15);
  --shadow-card: 0 30px 80px -30px oklch(0.18 0.04 250 / 0.25);
  --shadow-glow: 0 20px 50px -16px oklch(0.65 0.18 230 / 0.40);
  --gradient-copper: linear-gradient(135deg, oklch(0.65 0.18 230) 0%, oklch(0.82 0.13 85) 100%);
}

html { scroll-behavior: smooth; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
* { border-color: var(--border); }
h1,h2,h3,h4 { font-family: 'Playfair Display','Cormorant Garamond',Georgia,serif; letter-spacing:-0.025em; font-weight:500; margin:0; }

.font-serif { font-family: 'Playfair Display','Cormorant Garamond',Georgia,serif; }
.font-display { font-family: 'Playfair Display','Cormorant Garamond',Georgia,serif; }
.font-sans { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; }

.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.bg-gradient-copper { background: var(--gradient-copper); }
.scrollbar-none::-webkit-scrollbar { display:none; }
.scrollbar-none { scrollbar-width:none; }

/* lucide icons */
.lucide { width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:middle; }

/* simple fade-in for animated reveals */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px);} to { opacity:1; transform:none;} }
.anim-fade-up { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes scaleIn { from { opacity:0; transform:scale(.97);} to { opacity:1; transform:none;} }
.anim-scale-in { animation: scaleIn .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.anim-floaty { animation: floaty 3s ease-in-out infinite; }
@keyframes drawLine { from { transform: scaleX(0);} to { transform: scaleX(1);} }
.anim-underline { transform-origin: left; animation: drawLine .9s ease-out .9s both; }

/* before/after slider */
.cmp { position:relative; overflow:hidden; user-select:none; touch-action:pan-y; }
.cmp img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.cmp .after { position:absolute; inset:0; }
.cmp .before { position:absolute; inset:0; clip-path: inset(0 50% 0 0); }
.cmp .handle {
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff;
  transform:translateX(-50%); pointer-events:none; box-shadow:0 0 8px rgba(0,0,0,.4);
}
.cmp .knob {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:9999px; background:#fff;
  display:grid; place-items:center; cursor:ew-resize; box-shadow:0 4px 14px rgba(0,0,0,.3);
  pointer-events:auto;
}
.cmp .knob svg { width:18px; height:18px; }

/* WordPress parity refinements for the animations and responsive behavior */
@keyframes floatyIcon { 0%,100%{transform:translateY(0) rotate(0deg)} 33%{transform:translateY(-4px) rotate(-6deg)} 66%{transform:translateY(-2px) rotate(6deg)} }
.anim-floaty { animation: floatyIcon 3s ease-in-out infinite; }
[data-reveal] { opacity:0; transform:translateY(30px); }
[data-reveal].anim-fade-up { opacity:1; transform:none; }
.cp-lead-visible > div { animation: leadModalIn .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes leadModalIn { from { opacity:0; transform:translateY(40px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.cp-service-media img, .cp-service-media video { transition:transform .45s cubic-bezier(.22,1,.36,1); }
.cp-service-media:hover img, .cp-service-media:hover video { transform:scale(1.035); }
.cp-service-play { z-index:2; }
.cmp .handle { width:2px; background:#fff; box-shadow:0 0 8px rgba(0,0,0,.4); cursor:ew-resize; }
.cmp .knob { transition:transform .2s ease, box-shadow .2s ease; }
.cmp:hover .knob { transform:translate(-50%,-50%) scale(1.05); box-shadow:0 8px 24px rgba(0,0,0,.34); }
@media (max-width: 640px) {
  #cp-lead-popup h3 { white-space:normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Section parity: rely on Tailwind utility classes + design tokens (matches Lovable 1:1).
   Legacy section-specific color overrides have been removed so the WordPress build
   inherits the exact same colors, badges and surfaces as the Lovable React version. */

/* -------------------------------------------------------------------------
   Alpha utility fallbacks
   The Tailwind v3 CDN cannot generate `/<opacity>` modifiers for colors that
   are defined as full CSS variables (oklch values can't be split into
   <alpha-value> channels). We re-create the exact classes used in markup
   here with color-mix() so they match the Lovable React build pixel-for-pixel.
   ------------------------------------------------------------------------- */
.bg-primary\/10   { background-color: color-mix(in oklab, var(--primary) 10%, transparent) !important; }
.bg-primary\/40,
.hover\:bg-primary\/40:hover { background-color: color-mix(in oklab, var(--primary) 40%, transparent) !important; }
.hover\:bg-primary\/90:hover { background-color: color-mix(in oklab, var(--primary) 90%, transparent) !important; }
.border-primary\/40 { border-color: color-mix(in oklab, var(--primary) 40%, transparent) !important; }

.bg-secondary\/40 { background-color: color-mix(in oklab, var(--secondary) 40%, transparent) !important; }
.bg-secondary\/60 { background-color: color-mix(in oklab, var(--secondary) 60%, transparent) !important; }
.bg-secondary\/70 { background-color: color-mix(in oklab, var(--secondary) 70%, transparent) !important; }

.bg-soft\/40 { background-color: color-mix(in oklab, var(--soft) 40%, transparent) !important; }
.bg-soft\/60 { background-color: color-mix(in oklab, var(--soft) 60%, transparent) !important; }
.hover\:bg-soft\/70:hover { background-color: color-mix(in oklab, var(--soft) 70%, transparent) !important; }
.hover\:bg-soft\/80:hover { background-color: color-mix(in oklab, var(--soft) 80%, transparent) !important; }

.bg-accent\/60 { background-color: color-mix(in oklab, var(--accent) 60%, transparent) !important; }

.bg-background\/15 { background-color: color-mix(in oklab, var(--background) 15%, transparent) !important; }
.bg-background\/70 { background-color: color-mix(in oklab, var(--background) 70%, transparent) !important; }
.bg-background\/95 { background-color: color-mix(in oklab, var(--background) 95%, transparent) !important; }
.border-background\/60 { border-color: color-mix(in oklab, var(--background) 60%, transparent) !important; }

.hover\:bg-foreground\/90:hover { background-color: color-mix(in oklab, var(--foreground) 90%, transparent) !important; }
.text-foreground\/65 { color: color-mix(in oklab, var(--foreground) 65%, transparent) !important; }
.text-foreground\/70 { color: color-mix(in oklab, var(--foreground) 70%, transparent) !important; }
.text-foreground\/80 { color: color-mix(in oklab, var(--foreground) 80%, transparent) !important; }
.text-foreground\/90 { color: color-mix(in oklab, var(--foreground) 90%, transparent) !important; }
.border-foreground\/40 { border-color: color-mix(in oklab, var(--foreground) 40%, transparent) !important; }

.border-border\/40 { border-color: color-mix(in oklab, var(--border) 40%, transparent) !important; }
.border-border\/60 { border-color: color-mix(in oklab, var(--border) 60%, transparent) !important; }

.bg-whatsapp\/10 { background-color: color-mix(in oklab, var(--whatsapp) 10%, transparent) !important; }

.bg-white\/15     { background-color: rgb(255 255 255 / 0.15) !important; }
.border-white\/40 { border-color: rgb(255 255 255 / 0.40) !important; }
.bg-black\/50     { background-color: rgb(0 0 0 / 0.50) !important; }

/* Functional click safety: keep all WhatsApp and Maps anchors above decorative layers. */
a[href^="https://wa.me/"],
a[href^="tel:"],
a[href^="mailto:"],
#cp-loc-link,
a[href^="https://wa.me/"] *,
#cp-loc-link * {
  pointer-events: auto !important;
  cursor: pointer !important;
}
a[href^="https://wa.me/"],
#cp-loc-link {
  position: relative;
  z-index: 5;
}
#start .absolute.inset-0.bg-gradient-to-t,
#cp-lead-popup > div::before,
#cp-lead-popup > div::after {
  pointer-events: none !important;
}
/* Never show not-allowed on enabled interactive elements */
a:not([disabled]),
button:not([disabled]),
[role="button"]:not([disabled]) {
  cursor: pointer;
}
a[href]:not([disabled]):hover,
button:not([disabled]):hover,
[role="button"]:not([disabled]):hover {
  cursor: pointer !important;
}

/* Send icon subtle loop animation */
@keyframes cpSendLoop {
  0%   { transform: translate(0,0) rotate(0deg); }
  40%  { transform: translate(2px,-2px) rotate(6deg); }
  60%  { transform: translate(3px,-3px) rotate(8deg); opacity:.85; }
  61%  { transform: translate(-4px,4px) rotate(-4deg); opacity:0; }
  62%  { transform: translate(-4px,4px) rotate(-4deg); opacity:0; }
  80%  { transform: translate(-1px,1px) rotate(-1deg); opacity:1; }
  100% { transform: translate(0,0) rotate(0deg); }
}
.cp-send-loop { animation: cpSendLoop 3.6s ease-in-out infinite; transform-origin: 50% 50%; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .cp-send-loop { animation: none; } }