/* ============================================================
   TrataMentes · Cascais — Folha de estilos standalone
   Cobre: paleta teal (brand) + paleta gold (nova) + cream +
          variantes de opacidade + valores arbitrários específicos
          desta landing page que o Hugo CSS base pode não ter.
   Carregada DEPOIS de /css/style.min.css para override seguro.
   ============================================================ */

/* ── Backgrounds teal ─────────────────────────────────────── */
.bg-teal-50  { background-color: #EEF4F4; }
.bg-teal-100 { background-color: #D5E8E9; }
.bg-teal-200 { background-color: #ABCFD1; }
.bg-teal-300 { background-color: #7AB4B7; }
.bg-teal-400 { background-color: #4E969A; }
.bg-teal-500 { background-color: #2D5A5E; }
.bg-teal-600 { background-color: #1e3d40; }
.bg-teal-700 { background-color: #142B2D; }
.bg-teal-800 { background-color: #0C1A1C; }
.bg-teal-900 { background-color: #081517; }

/* Teal com opacidade */
.bg-teal-800\/20 { background-color: rgb(12 26 28 / 0.2); }
.bg-teal-900\/20 { background-color: rgb(8 21 23 / 0.2); }
.bg-teal-900\/30 { background-color: rgb(8 21 23 / 0.3); }
.bg-teal-900\/80 { background-color: rgb(8 21 23 / 0.8); }

/* Hover teal */
.hover\:bg-teal-50:hover  { background-color: #EEF4F4; }
.hover\:bg-teal-500:hover { background-color: #2D5A5E; }
.hover\:bg-teal-600:hover { background-color: #1e3d40; }
.hover\:bg-teal-700:hover { background-color: #142B2D; }
.hover\:bg-teal-800:hover { background-color: #0C1A1C; }

/* ── Backgrounds gold ─────────────────────────────────────── */
.bg-gold-50  { background-color: #FDF8F2; }
.bg-gold-100 { background-color: #FAF0E1; }
.bg-gold-200 { background-color: #F0D9B9; }
.bg-gold-300 { background-color: #E5C090; }
.bg-gold-400 { background-color: #D4A373; }
.bg-gold-500 { background-color: #C48A57; }
.bg-gold-600 { background-color: #9A6B3C; }
.bg-gold-700 { background-color: #7A5230; }

.hover\:bg-gold-700:hover { background-color: #7A5230; }

/* ── Backgrounds cream ────────────────────────────────────── */
.bg-cream      { background-color: #FDF8F2; }
.bg-cream-warm { background-color: #FBF3E8; }

/* ── Backgrounds com hex arbitrário ──────────────────────── */
.bg-\[\#F8F9FA\]    { background-color: #F8F9FA; }
.bg-\[\#25D366\]    { background-color: #25D366; }
.hover\:bg-\[\#1da851\]:hover { background-color: #1da851; }

/* Opacidade em backgrounds standard */
.bg-white\/10  { background-color: rgb(255 255 255 / 0.1); }
.bg-white\/20  { background-color: rgb(255 255 255 / 0.2); }
.bg-black\/40  { background-color: rgb(0 0 0 / 0.4); }
.hover\:bg-white\/20:hover { background-color: rgb(255 255 255 / 0.2); }
.bg-\[\#F8F9FA\]\/96 { background-color: rgb(248 249 250 / 0.96); }

/* ── Texto teal ───────────────────────────────────────────── */
.text-teal-50  { color: #EEF4F4; }
.text-teal-100 { color: #D5E8E9; }
.text-teal-200 { color: #ABCFD1; }
.text-teal-300 { color: #7AB4B7; }
.text-teal-400 { color: #4E969A; }
.text-teal-500 { color: #2D5A5E; }
.text-teal-600 { color: #1e3d40; }
.text-teal-700 { color: #142B2D; }
.text-teal-800 { color: #0C1A1C; }
.text-teal-900 { color: #081517; }

.text-teal-300\/60 { color: rgb(122 180 183 / 0.6); }

.hover\:text-teal-600:hover { color: #1e3d40; }
.hover\:text-white:hover    { color: #ffffff; }

/* ── Texto gold ───────────────────────────────────────────── */
.text-gold-50  { color: #FDF8F2; }
.text-gold-100 { color: #FAF0E1; }
.text-gold-200 { color: #F0D9B9; }
.text-gold-300 { color: #E5C090; }
.text-gold-400 { color: #D4A373; }
.text-gold-500 { color: #C48A57; }
.text-gold-600 { color: #9A6B3C; }
.text-gold-700 { color: #7A5230; }

.hover\:text-gold-600:hover { color: #9A6B3C; }
.hover\:text-gold-700:hover { color: #7A5230; }

/* ── Bordas teal ──────────────────────────────────────────── */
.border-teal-50  { border-color: #EEF4F4; }
.border-teal-100 { border-color: #D5E8E9; }
.border-teal-200 { border-color: #ABCFD1; }
.border-teal-300 { border-color: #7AB4B7; }
.border-teal-500 { border-color: #2D5A5E; }
.border-teal-600 { border-color: #1e3d40; }
.border-teal-700 { border-color: #142B2D; }
.border-teal-800 { border-color: #0C1A1C; }

.hover\:border-teal-300:hover { border-color: #7AB4B7; }

/* ── Bordas com opacidade ─────────────────────────────────── */
.border-gold-300\/40 { border-color: rgb(229 192 144 / 0.4); }
.border-white\/25    { border-color: rgb(255 255 255 / 0.25); }

/* ── Decoration (sublinhado de texto) ─────────────────────── */
.decoration-gold-300 { text-decoration-color: #E5C090; }

/* ── Shadow com cor teal ──────────────────────────────────── */
.shadow-teal-100\/60 { --tw-shadow-color: rgb(213 232 233 / 0.6); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); }
.shadow-teal-200\/40 { --tw-shadow-color: rgb(171 207 209 / 0.4); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); }
.shadow-teal-200\/50 { --tw-shadow-color: rgb(171 207 209 / 0.5); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); }

/* ── Tamanhos de fonte arbitrários ────────────────────────── */
.text-\[10px\]    { font-size: 10px; line-height: 1.4; }
.text-\[3\.25rem\] { font-size: 3.25rem; line-height: 1.2; }

/* ── Tracking arbitrário ──────────────────────────────────── */
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }

/* ── min-height hero ──────────────────────────────────────── */
.min-h-\[82vh\] { min-height: 82vh; }

/* ── Aspect ratio portrait ────────────────────────────────── */
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }

/* ── z-index altos ────────────────────────────────────────── */
.z-\[100\] { z-index: 100; }
.z-\[199\] { z-index: 199; }
.z-\[200\] { z-index: 200; }

/* ── Opacidade de elementos ───────────────────────────────── */
.opacity-10 { opacity: 0.10; }
.opacity-15 { opacity: 0.15; }

/* ── Larguras/alturas arbitrárias (decorações breathing) ─── */
.w-\[200px\] { width:  200px; }
.h-\[200px\] { height: 200px; }
.w-\[260px\] { width:  260px; }
.h-\[260px\] { height: 260px; }
.w-\[300px\] { width:  300px; }
.h-\[300px\] { height: 300px; }
.w-\[320px\] { width:  320px; }
.h-\[320px\] { height: 320px; }
.w-\[420px\] { width:  420px; }
.h-\[520px\] { height: 520px; }
.w-\[520px\] { width:  520px; }
.h-\[520px\] { height: 520px; }
.w-\[540px\] { width:  540px; }
.h-\[540px\] { height: 540px; }
.w-\[600px\] { width:  600px; }
.h-\[600px\] { height: 600px; }

/* ── Posição arbitrária ───────────────────────────────────── */
.right-\[30\%\] { right: 30%; }

/* ── Inset negativo ───────────────────────────────────────── */
.-inset-6 { top: -1.5rem; right: -1.5rem; bottom: -1.5rem; left: -1.5rem; }

/* ── Border radius blob / hero image ─────────────────────── */
.rounded-\[40\%_60\%_55\%_45\%_\/_45\%_55\%_60\%_40\%\] {
  border-radius: 40% 60% 55% 45% / 45% 55% 60% 40%;
}
.rounded-\[35\%_65\%_50\%_50\%_\/_45\%_50\%_55\%_50\%\] {
  border-radius: 35% 65% 50% 50% / 45% 50% 55% 50%;
}

/* ── FAQ — chevron rotate (group-open) ───────────────────── */
details[open] .group-open\:rotate-180 {
  transform: rotate(180deg);
}

/* ── md: responsive overrides específicos desta página ──── */
@media (min-width: 768px) {
  .md\:-mt-4 { margin-top: -1rem; }
}

/* ── Negative margin-top 4 (serviços card featured) ──────── */
.md\:mb-0  { /* handled by responsive CSS above */ }

/* ── Responsive: lg: para hero grid ─────────────────────── */
@media (min-width: 1024px) {
  .lg\:text-\[3\.25rem\] { font-size: 3.25rem; }
}

/* ── font-serif helper ────────────────────────────────────── */
.font-serif {
  font-family: 'Merriweather', ui-serif, Georgia, serif;
}

/* ── Navbar flutuante ─────────────────────────────────────── */
.h-14 { height: 3.5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }

/* pt navbar responsivo */
.pt-20  { padding-top: 5rem; }
.pt-22  { padding-top: 5.5rem; }

/* Bg branco com opacidade (navbar glass, mobile menu) */
.bg-white\/80 { background-color: rgb(255 255 255 / 0.8); }
.bg-white\/95 { background-color: rgb(255 255 255 / 0.95); }

/* Bordas com opacidade para navbar glass */
.border-teal-100\/50 { border-color: rgb(213 232 233 / 0.5); }
.border-white\/40    { border-color: rgb(255 255 255 / 0.4); }

/* ── Hero imagem responsiva ───────────────────────────────── */
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }

.max-w-\[220px\] { max-width: 220px; }
.max-w-\[260px\] { max-width: 260px; }
.max-w-\[300px\] { max-width: 300px; }
.max-w-\[420px\] { max-width: 420px; }

@media (min-width: 640px) {
  .sm\:max-w-\[260px\] { max-width: 260px; }
  .sm\:flex           { display: flex; }
}

/* ── Language switcher pill ───────────────────────────────── */
.rounded-l-full { border-radius: 9999px 0 0 9999px; }
.rounded-r-full { border-radius: 0 9999px 9999px 0; }
.border-l-0     { border-left-width: 0; }
@media (min-width: 768px) {
  .md\:max-w-\[300px\] { max-width: 300px; }
  .md\:w-\[300px\]     { width: 300px; }
  .md\:h-\[400px\]     { height: 400px; }
}
@media (min-width: 1024px) {
  .lg\:max-w-\[420px\] { max-width: 420px; }
  .lg\:w-\[420px\]     { width: 420px; }
  .lg\:h-\[540px\]     { height: 540px; }
}

/* ── Blobs responsivos (hero decoração) ───────────────────── */
@media (min-width: 768px) {
  .md\:w-\[420px\]  { width: 420px; }
  .md\:h-\[420px\]  { height: 420px; }
  .md\:w-\[260px\]  { width: 260px; }
  .md\:h-\[260px\]  { height: 260px; }
  .md\:opacity-100  { opacity: 1; }
}
@media (min-width: 1024px) {
  .lg\:w-\[520px\]  { width: 520px; }
  .lg\:h-\[520px\]  { height: 520px; }
  .lg\:w-\[320px\]  { width: 320px; }
  .lg\:h-\[320px\]  { height: 320px; }
}

/* ── Hero grid responsivo ─────────────────────────────────── */
@media (min-width: 768px) {
  .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:gap-12       { gap: 3rem; }
  .md\:gap-10       { gap: 2.5rem; }
  .md\:py-16        { padding-top: 4rem; padding-bottom: 4rem; }
}
@media (min-width: 1024px) {
  .lg\:gap-16 { gap: 4rem; }
  .lg\:py-20  { padding-top: 5rem; padding-bottom: 5rem; }
}

/* ── hero padding top sm ──────────────────────────────────── */
@media (min-width: 640px) {
  .sm\:pt-22 { padding-top: 5.5rem; }
}

/* ── opacity para blobs mobile ────────────────────────────── */
.opacity-60 { opacity: 0.6; }