/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ═══════════════════════════════════════════════════
   DESIGN SYSTEM — Clínicas Paulo Salvador
   Paleta de Cores e Tokens Reutilizáveis
   ═══════════════════════════════════════════════════ */

:root {
  /* ─── Cores Primárias ─── */
  --cps-primary: #1B6B93;
  --cps-primary-light: #4DA8CF;
  --cps-primary-dark: #0E4A66;
  --cps-primary-rgb: 27, 107, 147;

  /* ─── Cores Secundárias ─── */
  --cps-secondary: #2EC4B6;
  --cps-secondary-light: #6EDCD1;
  --cps-secondary-dark: #1A8A7E;
  --cps-secondary-rgb: 46, 196, 182;

  /* ─── Cores de Destaque ─── */
  --cps-accent: #E8AA42;
  --cps-accent-light: #F0C96A;
  --cps-accent-dark: #C48C2A;

  /* ─── Neutros ─── */
  --cps-white: #FFFFFF;
  --cps-off-white: #F8F9FA;
  --cps-gray-50: #FAFBFC;
  --cps-gray-100: #F1F3F5;
  --cps-gray-200: #DEE2E6;
  --cps-gray-300: #ADB5BD;
  --cps-gray-400: #868E96;
  --cps-gray-500: #6C757D;
  --cps-gray-600: #495057;
  --cps-gray-700: #343A40;
  --cps-gray-800: #212529;
  --cps-gray-900: #121416;

  /* ─── Tipografia ─── */
  --cps-font-heading: 'Outfit', sans-serif;
  --cps-font-body: 'Inter', sans-serif;
  --cps-font-size-xs: 0.75rem;
  --cps-font-size-sm: 0.875rem;
  --cps-font-size-base: 1rem;
  --cps-font-size-lg: 1.125rem;
  --cps-font-size-xl: 1.25rem;
  --cps-font-size-2xl: 1.5rem;
  --cps-font-size-3xl: 2rem;
  --cps-font-size-4xl: 2.5rem;
  --cps-font-size-5xl: 3.5rem;

  /* ─── Espaçamentos ─── */
  --cps-space-xs: 4px;
  --cps-space-sm: 8px;
  --cps-space-md: 16px;
  --cps-space-lg: 24px;
  --cps-space-xl: 32px;
  --cps-space-2xl: 48px;
  --cps-space-3xl: 64px;
  --cps-space-4xl: 96px;
  --cps-section-gap: 80px;
  --cps-container-max: 1200px;

  /* ─── Border Radius ─── */
  --cps-radius-xs: 4px;
  --cps-radius-sm: 8px;
  --cps-radius: 12px;
  --cps-radius-lg: 16px;
  --cps-radius-xl: 24px;
  --cps-radius-full: 9999px;

  /* ─── Sombras ─── */
  --cps-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --cps-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --cps-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --cps-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --cps-shadow-xl: 0 16px 48px rgba(0,0,0,0.16);

  /* ─── Transições ─── */
  --cps-transition-fast: all 0.15s ease;
  --cps-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --cps-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Overlays ─── */
  --cps-overlay-light: rgba(255,255,255,0.85);
  --cps-overlay-dark: rgba(0,0,0,0.5);
  --cps-overlay-primary: rgba(27, 107, 147, 0.85);
  --cps-overlay-gradient: linear-gradient(135deg, rgba(27,107,147,0.9) 0%, rgba(46,196,182,0.85) 100%);
}


/* ═══════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════ */

body {
  font-family: var(--cps-font-body);
  color: var(--cps-gray-700);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cps-font-heading);
  color: var(--cps-gray-800);
  line-height: 1.2;
  font-weight: 700;
}


/* ═══════════════════════════════════════════════════
   UTILITIES (para usar como classes CSS no Bricks)
   ═══════════════════════════════════════════════════ */

/* ─── Backgrounds ─── */
.cps-bg-primary { background-color: var(--cps-primary); color: var(--cps-white); }
.cps-bg-primary-light { background-color: var(--cps-primary-light); color: var(--cps-white); }
.cps-bg-primary-dark { background-color: var(--cps-primary-dark); color: var(--cps-white); }
.cps-bg-secondary { background-color: var(--cps-secondary); color: var(--cps-white); }
.cps-bg-accent { background-color: var(--cps-accent); color: var(--cps-gray-800); }
.cps-bg-white { background-color: var(--cps-white); }
.cps-bg-off-white { background-color: var(--cps-off-white); }
.cps-bg-gray-100 { background-color: var(--cps-gray-100); }
.cps-bg-gradient {
  background: linear-gradient(135deg, var(--cps-primary) 0%, var(--cps-secondary) 100%);
  color: var(--cps-white);
}
.cps-bg-gradient-subtle {
  background: linear-gradient(135deg, var(--cps-off-white) 0%, rgba(46,196,182,0.05) 100%);
}

/* ─── Textos ─── */
.cps-text-primary { color: var(--cps-primary); }
.cps-text-secondary { color: var(--cps-secondary); }
.cps-text-accent { color: var(--cps-accent); }
.cps-text-light { color: var(--cps-gray-400); }
.cps-text-muted { color: var(--cps-gray-500); }
.cps-text-white { color: var(--cps-white); }
.cps-text-heading { font-family: var(--cps-font-heading); }

/* ─── Botões ─── */
.cps-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--cps-radius-full);
  font-family: var(--cps-font-heading);
  font-weight: 600;
  font-size: var(--cps-font-size-base);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--cps-transition);
  line-height: 1.4;
}

.cps-btn-primary {
  background: var(--cps-primary);
  color: var(--cps-white);
  border-color: var(--cps-primary);
}
.cps-btn-primary:hover {
  background: var(--cps-primary-dark);
  border-color: var(--cps-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--cps-shadow-md);
}

.cps-btn-secondary {
  background: var(--cps-secondary);
  color: var(--cps-white);
  border-color: var(--cps-secondary);
}
.cps-btn-secondary:hover {
  background: var(--cps-secondary-dark);
  border-color: var(--cps-secondary-dark);
  transform: translateY(-2px);
  box-shadow: var(--cps-shadow-md);
}

.cps-btn-outline {
  background: transparent;
  color: var(--cps-white);
  border-color: var(--cps-white);
}
.cps-btn-outline:hover {
  background: var(--cps-white);
  color: var(--cps-primary);
  transform: translateY(-2px);
}

.cps-btn-accent {
  background: var(--cps-accent);
  color: var(--cps-gray-800);
  border-color: var(--cps-accent);
}
.cps-btn-accent:hover {
  background: var(--cps-accent-dark);
  border-color: var(--cps-accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--cps-shadow-md);
}

.cps-btn-sm {
  padding: 10px 24px;
  font-size: var(--cps-font-size-sm);
}

.cps-btn-lg {
  padding: 18px 40px;
  font-size: var(--cps-font-size-lg);
}

/* ─── Cards ─── */
.cps-card {
  background: var(--cps-white);
  border-radius: var(--cps-radius);
  box-shadow: var(--cps-shadow-sm);
  overflow: hidden;
  transition: var(--cps-transition);
}
.cps-card:hover {
  box-shadow: var(--cps-shadow-lg);
  transform: translateY(-4px);
}

.cps-card-glass {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--cps-radius-lg);
}

.cps-card-bordered {
  border: 1px solid var(--cps-gray-200);
  border-radius: var(--cps-radius);
  padding: var(--cps-space-lg);
  transition: var(--cps-transition);
}
.cps-card-bordered:hover {
  border-color: var(--cps-primary-light);
  box-shadow: var(--cps-shadow-sm);
}

/* ─── Seções ─── */
.cps-section {
  padding: var(--cps-section-gap) 0;
}

.cps-section-title {
  font-size: var(--cps-font-size-4xl);
  color: var(--cps-gray-800);
  margin-bottom: var(--cps-space-md);
}

.cps-section-subtitle {
  font-size: var(--cps-font-size-lg);
  color: var(--cps-gray-500);
  max-width: 600px;
}

.cps-section-divider {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--cps-primary) 0%, var(--cps-secondary) 100%);
  border-radius: var(--cps-radius-full);
  margin: var(--cps-space-md) 0;
}

/* ─── Badge / Tag ─── */
.cps-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: var(--cps-radius-full);
  font-size: var(--cps-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cps-badge-primary {
  background: rgba(var(--cps-primary-rgb), 0.1);
  color: var(--cps-primary);
}
.cps-badge-secondary {
  background: rgba(var(--cps-secondary-rgb), 0.1);
  color: var(--cps-secondary-dark);
}

/* ─── Estrelas (Testemunhos) ─── */
.cps-stars {
  color: var(--cps-accent);
  font-size: var(--cps-font-size-lg);
  letter-spacing: 2px;
}

/* ─── Imagens ─── */
.cps-img-rounded { border-radius: var(--cps-radius); }
.cps-img-circle { border-radius: var(--cps-radius-full); }
.cps-img-cover { object-fit: cover; width: 100%; height: 100%; }

/* ─── Header Sticky ─── */
.cps-header {
  transition: var(--cps-transition);
}
.cps-header.scrolled {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(20px);
  box-shadow: var(--cps-shadow-sm);
}

/* ─── Animações ─── */
@keyframes cps-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cps-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cps-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.cps-animate-in {
  animation: cps-fade-in-up 0.6s ease-out forwards;
}

.cps-animate-delay-1 { animation-delay: 0.1s; }
.cps-animate-delay-2 { animation-delay: 0.2s; }
.cps-animate-delay-3 { animation-delay: 0.3s; }
.cps-animate-delay-4 { animation-delay: 0.4s; }


/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --cps-section-gap: 48px;
    --cps-font-size-5xl: 2.25rem;
    --cps-font-size-4xl: 1.75rem;
    --cps-font-size-3xl: 1.5rem;
  }

  .cps-btn {
    padding: 12px 24px;
    font-size: var(--cps-font-size-sm);
  }

  .cps-btn-lg {
    padding: 14px 28px;
    font-size: var(--cps-font-size-base);
  }
}


/* ═══════════════════════════════════════════════════
   SCROLLBAR CUSTOM
   ═══════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--cps-gray-100);
}
::-webkit-scrollbar-thumb {
  background: var(--cps-gray-300);
  border-radius: var(--cps-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cps-primary-light);
}


/* ═══════════════════════════════════════════════════
   SELECTION
   ═══════════════════════════════════════════════════ */

::selection {
  background: rgba(var(--cps-primary-rgb), 0.2);
  color: var(--cps-primary-dark);
}