/* ============================================================ refac.css — base limpa para as páginas -refac Reconstrução fiel ao DESIGN ORIGINAL (WordPress/Elementor), sem o plumbing do WP. Tokens derivados dos Elementor globals das páginas originais. Duas paletas (aplicar no ou ): .pal-carol → home + telemedicina (navy / rosa / roxo · Bebas + Manrope) .pal-vg → vetgourmet (teal / rosa / verde · Poppins + DM Sans) ============================================================ */ /* ---------- Fontes (self-hosted, subsets latinos) ---------- */ @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('/styles/fonts/bebasneue-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('/styles/fonts/bebasneue-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/styles/fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/styles/fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/styles/fonts/poppins-400.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/styles/fonts/poppins-500.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/styles/fonts/poppins-600.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/styles/fonts/poppins-700.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/styles/fonts/poppins-800.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/styles/fonts/dmsans-var.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/styles/fonts/inter-var.woff2') format('woff2'); } /* ---------- Reset enxuto ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html, body { overflow-x: hidden; } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.05; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; list-style: none; } /* ---------- Paleta CAROL (home + telemedicina) ---------- */ .pal-carol { --bg: #FFFFFF; --bg-navy: #040023; /* fundo dark dominante */ --bg-navy-2: #1D1847; /* navy elevado */ --surface: #F9F9F9; /* seção clara alternada */ --surface-2: #F5F5F5; --pink: #EC538E; /* CTA / acento principal */ --pink-deep: #CE2062; /* hover */ --pink-tint: #FDF2F7; /* card/badge rosa claro */ --purple: #9526CA; /* acento decorativo (marquee, badges dark) */ --purple-tint: #F6E9FE; --text: #1E1E1E; --text-2: #404040; --text-muted: #666666; --text-on-dark: #FFFFFF; --text-on-dark-2: rgba(255,255,255,.78); --border: #E4E5E5; --danger: #E83752; --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --display-up: uppercase; --display-ls: -0.01em; } /* Variante de títulos Inter sentence-case (telemedicina — fiel ao original) */ .heads-inter { --font-display: 'Inter', system-ui, sans-serif; --display-up: none; --display-ls: -0.02em; } .heads-inter .display, .heads-inter .h1, .heads-inter .h2, .heads-inter .h3 { font-weight: 600; } /* ---------- Paleta VETGOURMET ---------- */ .pal-vg { --bg: #FFFFFF; --bg-navy: #131517; --bg-navy-2: #1e2024; --surface: #F7F7F7; --surface-2: #FBE8F4; /* card rosa claro */ --pink: #CF337E; /* rosa da marca */ --pink-deep: #822C58; --pink-tint: #FBE8F4; --green: #61CE70; /* CTA verde original */ --green-deep: #4caf5a; --teal: #6EC1E4; /* primary teal */ --teal-2: #2DCEBA; --teal-tint: #C7FEF2; --text: #131517; --text-2: #333333; --text-muted: #7A7A7A; --text-on-dark: #FFFFFF; --text-on-dark-2: rgba(255,255,255,.78); --border: rgba(0,0,0,.12); --font-display: 'Poppins', system-ui, sans-serif; --font-body: 'Poppins', system-ui, sans-serif; --font-alt: 'DM Sans', system-ui, sans-serif; --display-up: none; --display-ls: -0.01em; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; } .container--narrow { max-width: 860px; } .container--wide { max-width: 1320px; } .section { padding-block: clamp(48px, 7vw, 96px); } .section--tight { padding-block: clamp(36px, 5vw, 64px); } /* seções dark (Carol) */ .on-dark { background: var(--bg-navy); color: var(--text-on-dark); } .on-dark-2 { background: var(--bg-navy-2); color: var(--text-on-dark); } .on-surface { background: var(--surface); } .on-pink-tint { background: var(--pink-tint); } /* ---------- Tipografia utilitária ---------- */ .display { font-family: var(--font-display); text-transform: var(--display-up); letter-spacing: var(--display-ls); line-height: 1; } .h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); } .h2 { font-size: clamp(1.9rem, 4vw, 3rem); } .h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); } .lead { font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--text-2); } .muted { color: var(--text-muted); } .on-dark .lead, .on-dark-2 .lead { color: var(--text-on-dark-2); } .tt-pink { color: var(--pink); } .tt-purple { color: var(--purple); } /* ---------- Eyebrow / pill ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--pink); background: var(--pink-tint); border: 1px solid var(--pink); border-color: color-mix(in srgb, var(--pink) 22%, transparent); padding: 6px 16px; border-radius: 999px; } .on-dark .eyebrow, .on-dark-2 .eyebrow { color: #fff; background: color-mix(in srgb, var(--purple) 28%, transparent); border-color: color-mix(in srgb, var(--purple) 50%, transparent); } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 500; border: 1px solid var(--border); color: var(--text-2); background: #fff; } .on-dark .pill, .on-dark-2 .pill { color: #fff; background: color-mix(in srgb, #fff 8%, transparent); border-color: color-mix(in srgb, #fff 18%, transparent); } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1; padding: 16px 30px; border: 0; border-radius: 999px; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .btn:hover { transform: translateY(-1px); } .btn--pink { background: var(--pink); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--pink) 38%, transparent); } .btn--pink:hover { background: var(--pink-deep); } .btn--purple { background: var(--purple); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--purple) 40%, transparent); } .btn--green { background: var(--green, #61CE70); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--green, #61CE70) 38%, transparent); } .btn--green:hover { background: var(--green-deep, #4caf5a); } .btn--outline { background: transparent; border: 2px solid currentColor; } .btn--lg { padding: 18px 36px; font-size: 1.05rem; } .btn--block { display: flex; width: 100%; } /* ---------- Cards ---------- */ .card { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 28px; } .on-dark .card, .on-dark-2 .card { background: var(--bg-navy-2); border-color: color-mix(in srgb, #fff 12%, transparent); color: #fff; } /* ---------- Accordion (nativo, sem JS) ---------- */ .acc { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #fff; } .acc + .acc { margin-top: 12px; } .acc > summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; gap: 16px; font-family: var(--font-display); text-transform: var(--display-up); font-size: 1.1rem; } .acc > summary::-webkit-details-marker { display: none; } .acc > summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; color: var(--pink); transition: transform .2s; } .acc[open] > summary::after { content: "−"; } .acc__panel { padding: 0 24px 22px; color: var(--text-2); } /* ---------- Marquee (faixa rolante) ---------- */ .marquee { overflow: hidden; width: 100%; } .marquee__track { display: inline-flex; gap: 48px; white-space: nowrap; will-change: transform; animation: marquee-scroll var(--marquee-dur, 36s) linear infinite; } .marquee__track > span { display: inline-flex; align-items: center; gap: 48px; font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; letter-spacing: .05em; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* ---------- Carrossel horizontal (scroll-snap, sem lib) ---------- */ .hscroll { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; } .hscroll > * { flex: 0 0 auto; scroll-snap-align: center; } /* ---------- Grids ---------- */ .grid { display: grid; gap: 24px; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } /* ---------- Navbar simples ---------- */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; } .nav__logo { font-family: var(--font-display); text-transform: var(--display-up); font-size: 1.4rem; font-weight: 700; } .nav__links { display: flex; gap: 24px; } .nav__links a { font-size: .95rem; font-weight: 500; opacity: .85; } .nav__links a:hover { opacity: 1; } @media (max-width: 820px) { .nav__links { display: none; } } /* ---------- Section head ---------- */ .shead { text-align: center; max-width: 760px; margin: 0 auto 48px; } .shead .h2 { margin: 14px 0; text-wrap: balance; } /* ---------- Footer ---------- */ .foot { padding-block: 40px; } .foot__copy { font-size: .85rem; } /* ---------- Helpers ---------- */ .center { text-align: center; } .mt-cta { margin-top: 40px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }