@import url("https://use.typekit.net/hla5fyz.css");

/* poppins-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins/poppins-v24-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500 - latin */
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/poppins/poppins-v24-latin-500.woff2') format('woff2');
}

/* poppins-600 - latin */
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/poppins/poppins-v24-latin-600.woff2') format('woff2');
}

/* poppins-700 - latin */
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/poppins/poppins-v24-latin-700.woff2') format('woff2');
}

/* === OUROFINO BASE — Reset WP + Design Tokens Figma === */
:root {
    /* Sistema de Grid Baseado em 4px (8px base) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 96px;
    --spacing-5xl: 128px;

    /* Cores */
    --color-primary: #072047;
    --color-secondary: #007CC1;
    --color-accent: #10AD31;
    --color-emerald: #10AD31;
    --color-cyan: #20D5F2;
    --color-dark: #061833;

    /* Tipografia — escala Figma */
    --font-family-roca: 'roca', sans-serif;
    --font-secondary: 'Poppins', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;
    --line-height-heading: 1.2;

    /* Bordas */
    /* DS: todos os elementos arredondados usam 20px (exceto pills) */
    --border-radius-sm: 20px;
    --border-radius-md: 20px;
    --border-radius-lg: 20px;
    --border-radius-xl: 20px;
    --border-radius-full: 9999px;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-secondary);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--line-height-base);
    color: #072047;
    background: #EFEFEF !important;
    margin: 0;
    padding: 0;
}

/* Tipografia global — Figma tokens */
h1 {
    margin: var(--spacing-lg) 0 !important;
    font-family: var(--font-family-roca) !important;
    font-weight: 700 !important;
    line-height: var(--line-height-heading) !important;
    color: var(--color-primary);
    font-size: 34px !important;
}

h2 {
    margin: var(--spacing-lg) 0 !important;
    font-family: var(--font-secondary) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-heading) !important;
    color: var(--color-primary);
    font-size: 22px !important;
}

h3 {
    margin: var(--spacing-lg) 0 !important;
    font-family: var(--font-secondary) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-heading) !important;
    color: var(--color-primary);
    font-size: 18px !important;
}

h4 {
    margin: var(--spacing-lg) 0 !important;
    font-family: var(--font-secondary) !important;
    font-weight: 400 !important;
    line-height: var(--line-height-heading) !important;
    color: var(--color-primary);
    font-size: 18px !important;
}

h5 {
    margin: var(--spacing-lg) 0 !important;
    font-family: var(--font-secondary) !important;
    font-weight: 400 !important;
    line-height: var(--line-height-heading) !important;
    color: var(--color-primary);
    font-size: 16px !important;
}

h6 {
    margin: var(--spacing-lg) 0 !important;
    font-family: var(--font-secondary) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-heading) !important;
    color: var(--color-primary);
    font-size: 16px !important;
}

p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: #919AA8;
}

/* Reset WP admin bar spacing */
html {
    margin-top: 0 !important;
}

/* Reset WP defaults */
a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

button {
    font-family: inherit;
}

input {
    font-family: inherit;
}

.aligncenter {
    display: flex;
    justify-content: center;
}

.aligncenter img {
    border-radius: var(--border-radius-xl);
}

/* Hide WP admin bar */
#wpadminbar {
    display: none !important;
}

/* FAQ - Forçar display inline style */
.faq-content[style*="display: block"] {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

.faq-content[style*="display: none"] {
    display: none !important;
}

/* === NAVIGATION MENU === */
.ourofino-nav-item {
    position: relative;
    display: inline-block;
}

.ourofino-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: #072047;
    text-decoration: none;
    transition: all 0.5s ease-out;
    cursor: pointer;
}

.ourofino-nav-link:hover {
    color: #10AD31;
}

.ourofino-nav-link svg {
    transition: all 0.5s ease-out;
}

.ourofino-nav-item:hover .ourofino-nav-link svg {
    transform: rotate(180deg);
}

.ourofino-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: white;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-sm) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.5s ease-out;
    z-index: 1000;
}

.ourofino-nav-item:hover .ourofino-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ourofino-dropdown__item {
    display: block;
    padding: var(--spacing-sm) var(--spacing-xl);
    font-size: 0.875rem;
    color: #072047;
    text-decoration: none;
    transition: all 0.5s ease-out;
    white-space: nowrap;
}

/* Garante visibilidade do conteúdo */
main, #main {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Remove qualquer loader que possa estar travando */
#ourofino-loading {
    display: none !important;
}

/* === UTILITÁRIOS DE GRID === */
/* Espaçamento */
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }
.p-2xl { padding: var(--spacing-2xl) !important; }
.p-3xl { padding: var(--spacing-3xl) !important; }
.p-4xl { padding: var(--spacing-4xl) !important; }
.p-5xl { padding: var(--spacing-5xl) !important; }

.py-xs { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.py-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.py-lg { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.py-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }

.px-xs { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.px-sm { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.px-md { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.px-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.px-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }

.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }
.m-2xl { margin: var(--spacing-2xl) !important; }
.m-3xl { margin: var(--spacing-3xl) !important; }
.m-4xl { margin: var(--spacing-4xl) !important; }
.m-5xl { margin: var(--spacing-5xl) !important; }

.my-xs { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
.my-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.my-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.my-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.my-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }

.mx-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.mx-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.mx-md { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.mx-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
.mx-xl { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }

.mt-xs { margin-top: var(--spacing-xs) !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }

.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }

/* Bordas */
.rounded-sm { border-radius: var(--border-radius-sm) !important; }
.rounded-md { border-radius: var(--border-radius-md) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-xl { border-radius: var(--border-radius-xl) !important; }
.rounded-full { border-radius: var(--border-radius-full) !important; }

/* Sombras */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }

/* Flexbox */
.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.items-center { align-items: center !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.gap-xs { gap: var(--spacing-xs) !important; }
.gap-sm { gap: var(--spacing-sm) !important; }
.gap-md { gap: var(--spacing-md) !important; }
.gap-lg { gap: var(--spacing-lg) !important; }
.gap-xl { gap: var(--spacing-xl) !important; }

/* Texto */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-medium { font-weight: 500 !important; }
.font-normal { font-weight: 400 !important; }

/* Display */
.block { display: block !important; }
.inline-block { display: inline-block !important; }
/* .hidden removido — conflitava com lg:block/lg:flex do Tailwind */

/* === HEADER LOGO === */
.ourofino-header-logo {
    flex-shrink: 0;
    min-width: 120px;
}
.ourofino-header-logo__image {
    height: 7rem;
    width: auto;
}

/* Width */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.w-max { width: max-content !important; }
.w-min { width: min-content !important; }

/* Height */
.h-full { height: 100% !important; }
.h-auto { height: auto !important; }
.h-max { height: max-content !important; }
.h-min { height: min-content !important; }

/* Position */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }

/* Z-index */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.z-100 { z-index: 100 !important; }
.z-200 { z-index: 200 !important; }
.z-300 { z-index: 300 !important; }
.z-400 { z-index: 400 !important; }
.z-500 { z-index: 500 !important; }
.z-1000 { z-index: 1000 !important; }
.z-2000 { z-index: 2000 !important; }
.z-3000 { z-index: 3000 !important; }
.z-4000 { z-index: 4000 !important; }
.z-5000 { z-index: 5000 !important; }
.z-max { z-index: max !important; }
.z-min { z-index: min !important; }
.z-auto { z-index: auto !important; }