@charset "UTF-8";

@font-face {
    font-family: 'TAN Pearl';
    src: url('../font/TAN-PEARL-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  /* ---- Forçar modo claro em todos os browsers / iOS Safari ---- */
  :root { color-scheme: light only; }
  html, body, * { -webkit-text-size-adjust: 100%; }

  html { scroll-behavior: smooth; background-color: #faf8f5 !important; }
  body {
    background-color: #faf8f5 !important;
    color: #2c2420 !important;
    font-family: 'Jost', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Forçar cores explícitas em todos os elementos para bloquear dark mode do SO */
  section, header, footer, div, p, h1, h2, h3, h4, span, a, ul, li, blockquote, button {
    -webkit-appearance: none;
    appearance: none;
  }

  /* ---- Logo ---- */
  .logo-bg {
    padding: 70px 36px 20px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }
  .logo-wordmark {
    font-family: 'TAN Pearl', 'Cormorant Garamond', serif;
    font-size: clamp(42px, 10vw, 72px);
    letter-spacing: 0.1em;
    background: linear-gradient(90deg, #ffffff 0%, #905117 55%, #905117 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    display: block;
    text-align: center;
    padding: 12px;
  }
  .logo-subtitle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(9px, 2vw, 12px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffffff !important;
    text-align: center;
    display: block;
    white-space: nowrap;
  }

  /* ---- Pulse elegante ---- */
  @-webkit-keyframes elegant-pulse {
    0%, 100% { -webkit-box-shadow: 0 0 0 0 rgba(153,79,32,0.35); box-shadow: 0 0 0 0 rgba(153,79,32,0.35); }
    50% { -webkit-box-shadow: 0 0 0 14px rgba(153,79,32,0); box-shadow: 0 0 0 14px rgba(153,79,32,0); }
  }
  @keyframes elegant-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(153,79,32,0.35); }
    50% { box-shadow: 0 0 0 14px rgba(153,79,32,0); }
  }
  .cta-pulse { -webkit-animation: elegant-pulse 2.8s ease-in-out infinite; animation: elegant-pulse 2.8s ease-in-out infinite; }

  /* ---- Fade-in scroll ---- */
  .fade-in { opacity: 0; -webkit-transform: translateY(28px); transform: translateY(28px); -webkit-transition: opacity 0.8s ease, -webkit-transform 0.8s ease; transition: opacity 0.8s ease, transform 0.8s ease; }
  .fade-in.visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }

  /* ---- Accordion ---- */
  .accordion-content { max-height: 0; overflow: hidden; -webkit-transition: max-height 0.45s ease; transition: max-height 0.45s ease; }
  .accordion-content.open { max-height: 700px; }
  .accordion-icon { -webkit-transition: -webkit-transform 0.35s ease; transition: transform 0.35s ease; display: inline-block; }
  .accordion-icon.open { -webkit-transform: rotate(45deg); transform: rotate(45deg); }

  /* ---- Linha decorativa ---- */
  .terracota-rule { width: 48px; height: 1.5px; background-color: #994f20; display: block; }

  /* ---- Hero ---- */
  .hero-bg { background: linear-gradient(160deg, #2c2420 0%, #3d2e26 40%, #4a3428 70%, #994f20 100%) !important; }

  /* Textura sutil */
  .texture-overlay {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }

  /* ---- Before/After ---- */
  .ba-card { position: relative; overflow: hidden; border-radius: 4px; }
  .ba-label {
    position: absolute; bottom: 12px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
    background: rgba(44,36,32,0.85); color: #f5ede6 !important;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 4px 14px; border-radius: 2px; white-space: nowrap;
    font-family: 'Jost', sans-serif;
  }

  /* ---- Scrollbar ---- */
  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: #faf8f5; }
  ::-webkit-scrollbar-thumb { background: #c9b8aa; border-radius: 3px; }

  /* ---- Section label ---- */
  .section-label {
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: #994f20 !important; font-family: 'Jost', sans-serif; font-weight: 500;
    display: block;
  }

  /* ---- Textos justificados com recuo ---- */
  .prose-body p {
    text-align: justify;
    text-indent: 2em;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  /* Excepções: citações em itálico e parágrafos especiais não recuam */
  .prose-body p.no-indent,
  .prose-body p.font-serif {
    text-indent: 0;
    text-align: left;
  }

  /* Fundos explícitos para bloquear dark mode */
  .bg-cream-force { background-color: #f2ece4 !important; }
  .bg-offwhite-force { background-color: #faf8f5 !important; }
  .bg-darkearth-force { background-color: #2c2420 !important; }
  .bg-terracotapale-force { background-color: #f5ede6 !important; }
  .bg-white-force { background-color: #ffffff !important; }

  /* Cor de texto explícita */
  .text-warmgray-force { color: #8c8177 !important; }
  .text-darkearth-force { color: #2c2420 !important; }
  .text-offwhite-force { color: #faf8f5 !important; }
  .text-nude-force { color: #e8ddd4 !important; }
  .text-nudedark-force { color: #c9b8aa !important; }
  
  /* Bounce animation para iOS */
  @-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
    50% { -webkit-transform: translateY(-6px); transform: translateY(-6px); }
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .animate-bounce-safe { -webkit-animation: bounce 1.5s ease-in-out infinite; animation: bounce 1.5s ease-in-out infinite; }

  /* Hover estados para touch */
  @media (hover: none) {
    .hover\:bg-terracota-dark:active { background-color: #7a3e18 !important; }
  }

  /* Bounce do Tailwind funciona no safari com prefixo */
  .animate-bounce { animation: bounce 1s infinite; -webkit-animation: bounce 1s infinite; }

  #caixa {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 0px;
}

#caixa img {
    width: 60%;
    max-width: 400px;
    height: auto;
    display: block;
}

.texto-topo,
.texto-base {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 300;
    line-height: 1.2;
    color: #994f20;
    margin: 0;
    position: absolute;
}

.texto-topo {
    position: absolute;
    top: 10%;
    left: 5%;

    font-size: clamp(1rem, 2vw, 1.5rem);
    margin: 0;
}

.texto-base {
    position: absolute;
    right: 5%;
    bottom: 17%;

    font-size: clamp(1rem, 2vw, 1.5rem);
    margin: 0;
}

#caixa img {
    width: 60%;
    max-width: 400px;
    height: auto;
    display: block;

    animation: flutuar 3s ease-in-out infinite;
    transition: transform 0.3s ease;
}

#caixa img:hover {
    transform: scale(1.08);
}

@keyframes flutuar {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-14px);
    }
}

#caixa strong {
    font-weight: 700 !important;
}