/* bundle: bootstrap + icons + style + custom + eventos */ /*! * Bootstrap v5.3.2 (https://getbootstrap.com/) * Copyright 2011-2023 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}.h1,.h2,.h4,.h5,h1,h2,h4,h5{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}p{margin-top:0;margin-bottom:1rem}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ul{padding-left:2rem}ul{margin-top:0;margin-bottom:1rem}ul ul{margin-bottom:0}strong{font-weight:bolder}.small,small{font-size:.875em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}img{vertical-align:middle}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button{text-transform:none}[type=button],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.display-4{font-size:calc(1.475rem + 2.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-4{font-size:3.5rem}}.display-5{font-size:calc(1.425rem + 2.1vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-5{font-size:3rem}}.list-unstyled{padding-left:0;list-style:none}.img-fluid{max-width:100%;height:auto}.container{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1320px}}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col-12{flex:0 0 auto;width:100%}.g-4{--bs-gutter-x:1.5rem}.g-4{--bs-gutter-y:1.5rem}.g-5{--bs-gutter-x:3rem}.g-5{--bs-gutter-y:3rem}@media (min-width:768px){.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-6{flex:0 0 auto;width:50%}}@media (min-width:992px){.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-6{flex:0 0 auto;width:50%}}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:var(--bs-body-color);--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;--bs-btn-border-radius:var(--bs-border-radius);--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn:disabled{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.btn-success{--bs-btn-color:#fff;--bs-btn-bg:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#157347;--bs-btn-hover-border-color:#146c43;--bs-btn-focus-shadow-rgb:60,153,110;--bs-btn-active-color:#fff;--bs-btn-active-bg:#146c43;--bs-btn-active-border-color:#13653f;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#198754;--bs-btn-disabled-border-color:#198754}.btn-warning{--bs-btn-color:#000;--bs-btn-bg:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffca2c;--bs-btn-hover-border-color:#ffc720;--bs-btn-focus-shadow-rgb:217,164,6;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffcd39;--bs-btn-active-border-color:#ffc720;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#ffc107;--bs-btn-disabled-border-color:#ffc107}.btn-outline-primary{--bs-btn-color:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0d6efd;--bs-btn-hover-border-color:#0d6efd;--bs-btn-focus-shadow-rgb:13,110,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0d6efd;--bs-btn-active-border-color:#0d6efd;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0d6efd;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0d6efd;--bs-gradient:none}.btn-outline-success{--bs-btn-color:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#198754;--bs-btn-hover-border-color:#198754;--bs-btn-focus-shadow-rgb:25,135,84;--bs-btn-active-color:#fff;--bs-btn-active-bg:#198754;--bs-btn-active-border-color:#198754;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#198754;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#198754;--bs-gradient:none}.btn-outline-warning{--bs-btn-color:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffc107;--bs-btn-hover-border-color:#ffc107;--bs-btn-focus-shadow-rgb:255,193,7;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffc107;--bs-btn-active-border-color:#ffc107;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#ffc107;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#ffc107;--bs-gradient:none}.btn-outline-danger{--bs-btn-color:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#dc3545;--bs-btn-hover-border-color:#dc3545;--bs-btn-focus-shadow-rgb:220,53,69;--bs-btn-active-color:#fff;--bs-btn-active-bg:#dc3545;--bs-btn-active-border-color:#dc3545;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#dc3545;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#dc3545;--bs-gradient:none}.btn-outline-light{--bs-btn-color:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#f8f9fa;--bs-btn-hover-border-color:#f8f9fa;--bs-btn-focus-shadow-rgb:248,249,250;--bs-btn-active-color:#000;--bs-btn-active-bg:#f8f9fa;--bs-btn-active-border-color:#f8f9fa;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#f8f9fa;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#f8f9fa;--bs-gradient:none}.btn-outline-dark{--bs-btn-color:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#212529;--bs-btn-hover-border-color:#212529;--bs-btn-focus-shadow-rgb:33,37,41;--bs-btn-active-color:#fff;--bs-btn-active-bg:#212529;--bs-btn-active-border-color:#212529;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#212529;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#212529;--bs-gradient:none}.btn-lg{--bs-btn-padding-y:0.5rem;--bs-btn-padding-x:1rem;--bs-btn-font-size:1.25rem;--bs-btn-border-radius:var(--bs-border-radius-lg)}.btn-sm{--bs-btn-padding-y:0.25rem;--bs-btn-padding-x:0.5rem;--bs-btn-font-size:0.875rem;--bs-btn-border-radius:var(--bs-border-radius-sm)}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.nav{--bs-nav-link-padding-x:1rem;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-link-color);--bs-nav-link-hover-color:var(--bs-link-hover-color);--bs-nav-link-disabled-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);text-decoration:none;background:0 0;border:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:var(--bs-nav-link-hover-color)}.nav-link:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.nav-link:disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color:rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y:0.3125rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:1.25rem;--bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x:0.5rem;--bs-navbar-toggler-padding-y:0.25rem;--bs-navbar-toggler-padding-x:0.75rem;--bs-navbar-toggler-font-size:1.25rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color:rgba(var(--bs-emphasis-color-rgb), 0.15);--bs-navbar-toggler-border-radius:var(--bs-border-radius);--bs-navbar-toggler-focus-width:0.25rem;--bs-navbar-toggler-transition:box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{color:var(--bs-navbar-brand-hover-color)}.navbar-nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-navbar-color);--bs-nav-link-hover-color:var(--bs-navbar-hover-color);--bs-nav-link-disabled-color:var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:var(--bs-navbar-active-color)}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.navbar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-image:var(--bs-navbar-toggler-icon-bg);background-repeat:no-repeat;background-position:center;background-size:100%}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}.navbar-dark{--bs-navbar-color:rgba(255, 255, 255, 0.55);--bs-navbar-hover-color:rgba(255, 255, 255, 0.75);--bs-navbar-disabled-color:rgba(255, 255, 255, 0.25);--bs-navbar-active-color:#fff;--bs-navbar-brand-color:#fff;--bs-navbar-brand-hover-color:#fff;--bs-navbar-toggler-border-color:rgba(255, 255, 255, 0.1);--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-title-spacer-y:0.5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width:var(--bs-border-width);--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:var(--bs-border-radius);--bs-card-box-shadow: ;--bs-card-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-card-cap-padding-y:0.5rem;--bs-card-cap-padding-x:1rem;--bs-card-cap-bg:rgba(var(--bs-body-color-rgb), 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg:var(--bs-body-bg);--bs-card-img-overlay-padding:1rem;--bs-card-group-margin:0.75rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}.card-title{margin-bottom:var(--bs-card-title-spacer-y);color:var(--bs-card-title-color)}.card-text:last-child{margin-bottom:0}.card-img-top{width:100%}.card-img-top{border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.badge{--bs-badge-padding-x:0.65em;--bs-badge-padding-y:0.35em;--bs-badge-font-size:0.75em;--bs-badge-font-weight:700;--bs-badge-color:#fff;--bs-badge-border-radius:var(--bs-border-radius);display:inline-block;padding:var(--bs-badge-padding-y) var(--bs-badge-padding-x);font-size:var(--bs-badge-font-size);font-weight:var(--bs-badge-font-weight);line-height:1;color:var(--bs-badge-color);text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--bs-badge-border-radius)}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:var(--bs-border-width) solid var(--bs-alert-border-color);--bs-alert-border-radius:var(--bs-border-radius);--bs-alert-link-color:inherit;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius)}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-end,.carousel-item-next:not(.carousel-item-start){transform:translateX(100%)}.active.carousel-item-start,.carousel-item-prev:not(.carousel-item-end){transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item-next.carousel-item-start,.carousel-fade .carousel-item-prev.carousel-item-end,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:0 0;border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}@keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}@keyframes placeholder-glow{50%{opacity:.2}}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.opacity-75{opacity:.75!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-flex{display:flex!important}.d-none{display:none!important}.shadow-sm{box-shadow:var(--bs-box-shadow-sm)!important}.shadow-lg{box-shadow:var(--bs-box-shadow-lg)!important}.position-relative{position:relative!important}.border{border:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-0{border:0!important}.border-bottom{border-bottom:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.w-100{width:100%!important}.h-100{height:100%!important}.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.align-items-start{align-items:flex-start!important}.align-items-center{align-items:center!important}.mt-2{margin-top:.5rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.ms-3{margin-left:1rem!important}.ms-auto{margin-left:auto!important}.p-3{padding:1rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-4{padding-top:1.5rem!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.fs-4{font-size:calc(1.275rem + .3vw)!important}.fs-5{font-size:1.25rem!important}.fw-semibold{font-weight:600!important}.fw-bold{font-weight:700!important}.text-start{text-align:left!important}.text-center{text-align:center!important}.text-primary{--bs-text-opacity:1;color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important}.text-warning{--bs-text-opacity:1;color:rgba(var(--bs-warning-rgb),var(--bs-text-opacity))!important}.text-white{--bs-text-opacity:1;color:rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important}.text-warning-emphasis{color:var(--bs-warning-text-emphasis)!important}.bg-light{--bs-bg-opacity:1;background-color:rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important}.bg-dark{--bs-bg-opacity:1;background-color:rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important}.rounded-4{border-radius:var(--bs-border-radius-xl)!important}.rounded-circle{border-radius:50%!important}@media (min-width:576px){.d-sm-inline{display:inline!important}.d-sm-flex{display:flex!important}.flex-sm-row{flex-direction:row!important}.ms-sm-2{margin-left:.5rem!important}}@media (min-width:768px){.flex-md-row{flex-direction:row!important}.mb-md-0{margin-bottom:0!important}}@media (min-width:992px){.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.mt-lg-0{margin-top:0!important}.ms-lg-2{margin-left:.5rem!important}}@media (min-width:1200px){.fs-4{font-size:1.5rem!important}} /*! * Bootstrap Icons v1.11.3 (https://icons.getbootstrap.com/) * Copyright 2019-2024 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE) */@font-face{font-display:swap;font-family:bootstrap-icons;src:url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"),url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff")}.bi::before,[class*=" bi-"]::before,[class^=bi-]::before{display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bi-arrow-up::before{content:"\f148"}.bi-bag-check::before{content:"\f171"}.bi-basket::before{content:"\f180"}.bi-calendar-check::before{content:"\f1e2"}.bi-check-circle-fill::before{content:"\f26a"}.bi-circle::before{content:"\f28a"}.bi-clock-history::before{content:"\f292"}.bi-clock::before{content:"\f293"}.bi-egg-fried::before{content:"\f312"}.bi-egg::before{content:"\f313"}.bi-facebook::before{content:"\f344"}.bi-flower1::before{content:"\f3cd"}.bi-instagram::before{content:"\f437"}.bi-star-fill::before{content:"\f586"}.bi-star-half::before{content:"\f587"}.bi-star::before{content:"\f588"}.bi-telephone::before{content:"\f5c1"}.bi-whatsapp::before{content:"\f618"}.bi-x-circle-fill::before{content:"\f622"}.bi-fire::before{content:"\f7f6"} /* mobile.css — estilos base para mobile (até 768px) Projeto: Tempero da Ursa Arquitetura: Bootstrap-first Objetivo: experiência otimizada para celular (principal acesso de restaurantes) Breakpoints principais: 0px - 576px -> smartphones 577px - 768px -> mobile grande Regras: - evitar sobrescrever Bootstrap sem necessidade - manter performance - priorizar leitura e toque Última revisão: 2026-03 */ /* ========================= GLOBAL MOBILE BASE ========================= */ :root { --ursa-yellow: #F4D600; --ursa-text: #1E1E1E; --ursa-bg-light: #F5F5F5; --ursa-whatsapp: #25D366; } body { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.5; color: var(--ursa-text); background: #fff; } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--ursa-text); } html { scroll-behavior: smooth; } section { padding-top: 50px; padding-bottom: 50px; scroll-margin-top: 70px; } /* ========================= NAVBAR MOBILE ========================= */ .navbar { min-height: 64px; background: #1E1E1E; } .navbar-brand img { height: 34px; } .navbar-brand span { color: #fff; } .navbar-nav .nav-link { color: #fff; } .navbar-toggler { border: none; } .navbar .container { padding-left: 12px; padding-right: 12px; } .navbar-toggler { min-width: 44px; min-height: 44px; } .btn { min-height: 44px; } .nav-action-btn { min-height: 44px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 991.98px) { .navbar-collapse { background: #1E1E1E; padding: 1rem; border-radius: 10px; margin-top: 0.5rem; } .navbar-collapse .nav-link { color: #fff !important; min-height: 44px; display: flex; align-items: center; } .navbar-collapse .nav-link:hover { color: var(--ursa-yellow) !important; } .nav-action-btn { width: 100%; margin-top: 0.5rem; } } /* ========================= HERO MOBILE ========================= */ #hero { margin-top: 64px; background: #1E1E1E; padding-top: 0; padding-bottom: 0; } #hero .carousel, #hero .carousel-inner, #hero .carousel-item { height: 400px; } #hero .carousel-item picture { display: block; height: 100%; } #hero .carousel-item picture img { display: block; height: 100%; } .hero-overlay { inset: 0; background: rgba(0, 0, 0, 0.5); text-align: left; padding: 1.5rem 1rem; z-index: 2; } #hero .hero-overlay h1, #hero .hero-overlay p { color: #fff !important; } #hero .hero-overlay .hero-highlight { color: var(--ursa-yellow) !important; } .hero-overlay h1 { font-size: 2rem; line-height: 1.2; } .hero-highlight { color: var(--ursa-yellow); } .hero-subtitle { color: #fff; max-width: 44ch; font-size: 1rem; } .hero-badge { display: inline-flex; align-items: center; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--ursa-yellow); color: var(--ursa-text); font-family: 'Poppins', sans-serif; font-size: 0.9rem; letter-spacing: 0.04em; padding: 0.5rem 1rem; } .hero-buttons { display: flex; flex-direction: column; gap: 10px; } .hero-buttons .btn { width: 100%; min-height: 44px; } @media (min-width: 576px) { .hero-buttons { flex-direction: row; } .hero-buttons .btn { width: auto; } } .btn-hero-primary { background: var(--ursa-yellow); border: none; color: var(--ursa-text); font-weight: 600; } .btn-hero-primary:hover { background: #e8cb00; color: var(--ursa-text); } .btn-hero-outline { border-width: 2px; font-weight: 700; } .hero-carousel-img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.7); } @media (max-width: 767.98px) { .hero-overlay { padding: 1rem !important; } .hero-overlay h1 { font-size: 2rem !important; } .hero-overlay p { font-size: 1rem !important; } .hero-overlay .hero-buttons { flex-direction: column !important; gap: 0.75rem !important; } .hero-overlay .btn { width: 100%; margin: 0 !important; } } /* ========================= SOBRE RESTAURANTE ========================= */ #sobre img { margin-bottom: 20px; border-radius: 12px; } #sobre h2 { font-size: 1.6rem; font-weight: 700; } #sobre p { font-size: 0.95rem; } /* ========================= CARDÁPIO MOBILE ========================= */ #cardapio { background: var(--ursa-bg-light) !important; } #cardapio .cardapio-card { border-radius: 12px; border: none; background: #fff; overflow: hidden; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } #cardapio .cardapio-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14); } #cardapio .cardapio-img { width: 100%; height: 180px; object-fit: cover; } #cardapio .card-body { padding: 1.25rem; } #cardapio .cardapio-title { font-family: 'Poppins', sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--ursa-text); } #cardapio .cardapio-desc { font-family: 'Inter', sans-serif; font-size: 0.95rem; color: #5a5a5a; margin-bottom: 0.85rem; } #cardapio .cardapio-list { font-family: 'Inter', sans-serif; font-size: 0.95rem; color: var(--ursa-text); display: flex; flex-direction: column; gap: 0.35rem; } #cardapio .cardapio-icon { color: var(--ursa-yellow); } #cardapio .cardapio-badge { width: fit-content; border-radius: 999px; padding: 0.35rem 0.7rem; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; } #cardapio .cardapio-badge-healthy { background: var(--ursa-whatsapp); color: #fff; } #cardapio .cardapio-badge-featured { background: var(--ursa-yellow); color: var(--ursa-text); } #cardapio .cardapio-actions { width: 100%; } #cardapio .cardapio-btn { background: var(--ursa-whatsapp); color: #fff; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.72rem 1rem; font-family: 'Inter', sans-serif; font-weight: 600; min-height: 44px; } #cardapio .cardapio-btn i { font-size: 1rem; line-height: 1; } #cardapio .cardapio-btn:hover { background: #20b95a; color: #fff; } /* ========================= GALERIA MOBILE ========================= */ .galeria-pratos img { border-radius: 10px; margin-bottom: 12px; } /* ========================= LOCALIZAÇÃO MOBILE ========================= */ #localizacao iframe { border-radius: 10px; margin-bottom: 20px; } #localizacao h4 { font-size: 1.2rem; font-weight: 700; } /* ========================= BOTÃO WHATSAPP ========================= */ .btn-whatsapp { background: var(--ursa-whatsapp); color: white; border: none; width: 100%; font-weight: 600; border-radius: 999px; padding: 0.8rem; } .btn-whatsapp:hover { background: #1ebe5d; color: #fff; } /* ========================= HEADER MOBILE - BOTÃO WHATSAPP ========================= */ .navbar .btn-success.d-lg-none { background-color: var(--ursa-whatsapp); border-color: var(--ursa-whatsapp); color: #fff; width: auto !important; padding: 0.375rem 0.75rem !important; font-size: 0.9rem; border-radius: 50px; display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; } @media (min-width: 400px) { .d-xs-inline { display: inline !important; } } /* ========================= FOOTER MOBILE ========================= */ footer { background: var(--ursa-text) !important; color: #fff; font-size: 0.9rem; text-align: center; } footer p { margin-bottom: 6px; } footer .bi { color: #fff; transition: color 0.2s ease; } footer .bi:hover { color: var(--ursa-yellow); } footer .koddahub-signature { font-size: 0.85rem; white-space: nowrap; } footer .koddahub-signature a { color: #fff; text-decoration: none; display: inline-block; padding: 0.1rem 0.2rem; transition: color 0.2s ease; } footer .koddahub-signature a:hover { color: var(--ursa-yellow); } /* ========================= BOTÃO VOLTAR AO TOPO ========================= */ #scrollTopBtn { position: fixed; left: 20px; bottom: 80px; width: 48px; height: 48px; border: none; border-radius: 50%; background: var(--ursa-yellow); color: var(--ursa-text); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background-color 0.2s ease; z-index: 999; } #scrollTopBtn.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } #scrollTopBtn:hover { background: #e8cb00; transform: translateY(0) scale(1.05); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); } #scrollTopBtn:focus-visible { outline: 2px solid #1E1E1E; outline-offset: 2px; } /* ========================= BOTÃO FLUTUANTE WHATSAPP ========================= */ .whatsapp-float { position: fixed; bottom: 20px; right: 20px; width: 58px; height: 58px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; color: white; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); z-index: 999; } /* ========================= CAROUSEL CONTROLS MOBILE ========================= */ .carousel-control-prev, .carousel-control-next { width: 34px; height: 34px; background: rgba(0, 0, 0, 0.5); border-radius: 50%; top: 50%; transform: translateY(-50%); z-index: 1030; } .carousel-indicators button { width: 8px; height: 8px; border-radius: 50%; } .carousel-indicators { z-index: 1030; } #cookieConsent.cookie-banner { z-index: 12000 !important; } /* ========================= HOME — HERO / AVALIAÇÕES NO SLIDE 2 ========================= */ /* garante que o caption do slide fique acima da imagem e do fade */ #heroCarousel .carousel-item { position: relative; } /* Caption específico das avaliações */ .hero-rating-caption { right: 0; left: 0; bottom: 1rem; z-index: 5; } /* “pill/card” leve (bem mais discreto que o anterior) */ .hero-rating-box { display: inline-flex; flex-direction: column; gap: .25rem; padding: .75rem 1rem; border-radius: 1rem; color: var(--bs-white); background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.18); max-width: 26rem; text-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .55); } .hero-stars { letter-spacing: .08em; } @media (min-width: 768px) { .hero-rating-caption { bottom: 1.5rem; } .hero-rating-box { padding: 1rem 1.25rem; max-width: 30rem; } } /* tablet.css — estilos específicos para tablet (>=768px e <=991.98px) */ @media (min-width: 768px) and (max-width: 991.98px) { #hero { margin-top: 64px; background: #1E1E1E; overflow: hidden; } #hero .carousel, #hero .carousel-inner, #hero .carousel-item { height: 500px; } #hero .carousel-item img { height: 100%; object-fit: cover; object-position: center; filter: brightness(0.7); } #hero .carousel-caption, #hero .hero-overlay { display: flex !important; position: absolute; background: rgba(0, 0, 0, 0.5); border-radius: 0; top: 0; right: 0; bottom: 0; left: 0; text-align: left; padding: 1.5rem; } #hero .carousel-caption h1 { font-size: 2.5rem; } } /* desktop.css — estilos específicos para desktop (>=992px) Projeto: Tempero da Ursa Arquitetura: Bootstrap-first Objetivo: ajustes de layout, tipografia e experiência visual para telas maiores Breakpoints: 769px - 1279px -> laptop 1280px - 1919px -> desktop grande Última revisão: 2026-03 */ /* ========================= GLOBAL DESKTOP OVERRIDES Ajustes gerais para desktop ========================= */ :root { --ursa-yellow: #F4D600; --ursa-text: #1E1E1E; --ursa-bg-light: #F5F5F5; --ursa-whatsapp: #25D366; } html { scroll-behavior: smooth; } @media (min-width: 992px) { body { font-size: 17px; } section { padding-top: 80px; padding-bottom: 80px; scroll-margin-top: 80px; } } /* ========================= NAVBAR ========================= */ @media (min-width: 992px) { .navbar { min-height: 74px; padding-left: 3rem; padding-right: 3rem; background: #1E1E1E !important; } .navbar-brand img { height: 44px; } .navbar-nav .nav-link { font-weight: 600; padding-left: 1rem; padding-right: 1rem; color: #fff; } .navbar .btn { border-radius: 999px; padding-left: 1.5rem; padding-right: 1.5rem; } .nav-action-btn { width: auto !important; white-space: nowrap; margin-left: 0.5rem; } /* Reset do menu colapsado no desktop para evitar "caixa" escura */ .navbar-collapse { background: transparent; padding: 0; border-radius: 0; margin-top: 0; } } /* ========================= HEADER DESKTOP - BOTÃO WHATSAPP ========================= */ .navbar .btn-success.d-none.d-lg-inline-flex { border-radius: 999px; padding: 0.5rem 1.5rem; font-weight: 600; background: var(--ursa-whatsapp); border: none; color: white; transition: background 0.2s; } .navbar .btn-success.d-none.d-lg-inline-flex:hover { background: #1ebe5d; border-color: #1ebe5d; color: #fff; } .navbar .btn-success i { font-size: 1.2rem; } /* ========================= HERO SECTION ========================= */ @media (min-width: 768px) and (max-width: 991.98px) { #hero { margin-top: 64px; background: #1E1E1E; overflow: hidden; } #hero .carousel, #hero .carousel-inner, #hero .carousel-item { height: 500px; } #hero .carousel-item img { height: 100%; object-fit: cover; object-position: center; filter: brightness(0.7); } #hero .carousel-caption, #hero .hero-overlay { display: flex !important; position: absolute; background: rgba(0, 0, 0, 0.5); border-radius: 0; top: 0; right: 0; bottom: 0; left: 0; text-align: left; padding: 1.5rem; } #hero .carousel-caption h1 { font-size: 2.5rem; } } @media (min-width: 992px) { #hero { margin-top: 74px; background: #1E1E1E; overflow: hidden; } #hero .carousel, #hero .carousel-inner, #hero .carousel-item { height: 600px; } #hero .carousel-item img { height: 100%; object-fit: cover; object-position: center; filter: brightness(0.7); } #hero .carousel-caption, #hero .hero-overlay { display: flex !important; position: absolute; background: rgba(0, 0, 0, 0.5); border-radius: 0; top: 0; right: 0; bottom: 0; left: 0; text-align: left; padding: 2rem; } #hero .carousel-caption h1 { font-size: 3rem; } #hero .hero-subtitle { max-width: 600px; } .btn-hero-primary { background: var(--ursa-yellow); color: var(--ursa-text); border: none; font-weight: 600; } .btn-hero-primary:hover { background: #e8cb00; color: var(--ursa-text); } .btn-hero-outline { border-width: 2px; } } /* ========================= SOBRE RESTAURANTE ========================= */ @media (min-width: 992px) { #sobre img { border-radius: 18px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15); } #sobre h2 { font-size: 2.2rem; font-weight: 700; } #sobre p { font-size: 1.05rem; line-height: 1.6; } } /* ========================= CARDÁPIO ========================= */ @media (min-width: 992px) { #cardapio .cardapio-card { border-radius: 12px; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1); } #cardapio .cardapio-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.16); } #cardapio .cardapio-img { height: 200px; } #cardapio .card-body { padding: 1.5rem; } #cardapio .cardapio-title { font-size: 1.25rem; } #cardapio .cardapio-actions { width: auto; } #cardapio .cardapio-btn { width: auto; min-width: 190px; } } /* ========================= GALERIA DE PRATOS ========================= */ @media (min-width: 992px) { .galeria-pratos img { border-radius: 14px; transition: transform .25s ease, box-shadow .25s ease; } .galeria-pratos img:hover { transform: scale(1.03); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); } } /* ========================= LOCALIZAÇÃO ========================= */ @media (min-width: 992px) { #localizacao iframe { border-radius: 14px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } } /* ========================= BOTÃO WHATSAPP ========================= */ @media (min-width: 992px) { .btn-whatsapp { background: var(--ursa-whatsapp); border: none; font-weight: 600; padding: 0.8rem 1.8rem; border-radius: 999px; } .btn-whatsapp:hover { background: #1ebe5d; } } /* ========================= FOOTER ========================= */ @media (min-width: 992px) { footer { background: var(--ursa-text) !important; color: #fff; padding-top: 40px; padding-bottom: 40px; } footer p { font-size: 0.95rem; } footer .koddahub-signature { font-size: 0.85rem; } footer .bi { color: #fff; transition: color 0.2s ease; } footer .bi:hover { color: var(--ursa-yellow); } } @media (min-width: 992px) { .hero-rating-caption { bottom: 2rem; } .hero-rating-box { max-width: 34rem; } }/* home.css — base mobile-first (hero avaliações) */ #heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item { min-height: 360px; } #heroCarousel .carousel-item { position: relative; } #hero .hero-carousel-img { display: block; height: 56vh; max-height: 100%; min-height: 360px; object-fit: cover; } #hero .hero-overlay .container { min-height: 280px; } #hero .hero-overlay h1.display-4 { line-height: 1.1; } #hero .hero-subtitle { line-height: 1.45; } #hero .hero-highlight { display: inline-block; min-width: 200px; } #hero .hero-rating-caption { display: flex; justify-content: flex-start; align-items: flex-end; top: auto; right: 0; left: 0; bottom: 1rem; padding-left: 1rem; padding-right: 1rem; background: transparent; z-index: 5; pointer-events: none; } #hero .hero-rating-box { display: inline-flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0.625rem 0.75rem; border-radius: 0.75rem; background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--bs-white); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); max-width: 26rem; line-height: 1.3; font-size: 0.875rem; } #hero .hero-stars { letter-spacing: 0.08em; } .bi { display: inline-block; width: 1em; height: 1em; line-height: 1; vertical-align: -0.125em; } .bi::before { display: inline-block; line-height: 1; } #scrollTopBtn { line-height: 1; } #mobileWhatsAppBtn { min-height: 44px; line-height: 1; } #mobileWhatsAppBtn .bi { line-height: 1; } #cardapio .cardapio-card { overflow: hidden; } #cardapio .cardapio-img { display: block; width: 100%; height: 180px; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; background-color: var(--bs-gray-200); } /* Sobre */ #sobre { min-height: 600px; } #sobre .row { min-height: 400px; } #sobre .col-lg-6 { min-height: 380px; } #sobre .rating-score { font-size: 1.5rem; font-weight: 700; } #sobre .rating-count { color: var(--bs-secondary-color); font-size: 0.9rem; } #sobre .redes-sociais .btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } #sobre .redes-sociais .btn:hover { transform: translateY(-3px); } #sobre .info-horario { background-color: var(--bs-gray-100); border-radius: 12px; display: inline-flex; align-items: center; min-height: 72px; padding: 0.75rem 1rem; } #sobre .google-reviews { min-height: 80px; } #sobre .redes-sociais { min-height: 112px; } /* Correção visual: remove linhas/barras não intencionais no hero */ #hero::before, #hero::after, #hero .hero-overlay::before, #hero .hero-overlay::after, #hero .hero-highlight::before, #hero .hero-highlight::after, #hero .carousel-caption::before, #hero .carousel-caption::after { content: none !important; display: none !important; } #hero .hero-highlight, #hero h1, #hero .hero-overlay h1, #hero .hero-overlay p { border-bottom: 0 !important; box-shadow: none !important; text-decoration: none; } #hero hr, #hero .divider, #hero .separator { display: none !important; } /* ============================================ PREVENÇÃO DE CLS - SOBRE (ajuste residual) ============================================ */ #sobre { contain: layout; min-height: 550px; } #sobre .row { min-height: 450px; } #sobre .col-lg-6 { min-height: 400px; } #sobre p { line-height: 1.5; } #sobre p.lead { min-height: 72px; } #sobre p.mb-3 { min-height: 96px; } #sobre .info-horario { min-height: 72px; } #sobre .google-reviews { min-height: 88px; } #sobre .google-reviews .d-flex { min-height: 56px; } #sobre .redes-sociais { min-height: 112px; } #sobre .rating-count { display: inline-block; min-height: 1.5em; } #sobre img[width][height] { height: auto; } .navbar-collapse { min-height: 0; } @media (max-width: 991.98px) { .navbar .navbar-collapse { position: absolute; top: 100%; left: 0; right: 0; z-index: 1040; margin-top: 0; padding: 1rem; background-color: #1E1E1E; border-radius: 0 0 12px 12px; } } @media (min-width: 768px) { #sobre { min-height: 520px; } #sobre .row { min-height: 420px; } #sobre .col-lg-6 { min-height: 380px; } #sobre p.lead { min-height: 68px; } #sobre p.mb-3 { min-height: 92px; } } @media (min-width: 992px) { #sobre { min-height: 500px; } #sobre .row { min-height: 400px; } #sobre .col-lg-6 { min-height: 360px; } #sobre p.lead { min-height: 64px; } #sobre p.mb-3 { min-height: 88px; } } /* ============================================ PREVENÇÃO DE CLS - CONTAINER SOBRE (crítico) ============================================ */ #sobre .container { min-height: 650px; contain: layout style; } #sobre .row { min-height: 550px; } #sobre .col-lg-6 { min-height: 500px; } #sobre h2 { min-height: 60px; } #sobre p { min-height: 120px; } #sobre .info-horario, #sobre .google-reviews { min-height: 65px; } #sobre .redes-sociais { min-height: 85px; } #sobre img { min-height: 384px; background-color: #f0f0f0; } @media (min-width: 768px) { #sobre .container { min-height: 600px; } #sobre .row { min-height: 500px; } #sobre .col-lg-6 { min-height: 450px; } #sobre p { min-height: 100px; } } @media (min-width: 992px) { #sobre .container { min-height: 550px; } #sobre .row { min-height: 450px; } #sobre .col-lg-6 { min-height: 400px; } #sobre p { min-height: 80px; } } /* HEADER / NAVBAR — BRAND LOGO (mobile-first) */ .navbar .navbar-brand { min-width: 0; max-width: 100%; padding-top: 0; padding-bottom: 0; } .navbar .brand-logo { height: 48px; width: auto; max-width: 80px; display: block; object-fit: contain; border-radius: 0.5rem; } .navbar .brand-name { font-weight: 600; line-height: 1; white-space: nowrap; } @media (min-width: 768px) { .navbar .brand-logo { height: 56px; max-width: 80px; } } @media (min-width: 992px) { .navbar .brand-logo { height: 60px; max-width: 80px; } } /* home-tablet.css — ajustes tablet (>=768px) */ @media (min-width: 768px) { #heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item { min-height: 440px; } #hero .hero-carousel-img { min-height: 440px; } #hero .hero-overlay .container { min-height: 320px; } #hero .hero-rating-caption { bottom: 1.5rem; } #hero .hero-rating-box { padding: 0.75rem 0.875rem; max-width: 30rem; font-size: 0.9375rem; } #cardapio .cardapio-img { height: 200px; } #sobre { min-height: 550px; } #sobre .row { min-height: 360px; } #sobre .col-lg-6 { min-height: 340px; } } /* home-desktop.css — ajustes desktop (>=992px) */ @media (min-width: 992px) { #heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item { min-height: 520px; } #hero .hero-carousel-img { min-height: 520px; } #hero .hero-overlay .container { min-height: 340px; } #hero .hero-rating-caption { bottom: 2rem; } #hero .hero-rating-box { max-width: 34rem; font-size: 1rem; } #cardapio .cardapio-img { height: 220px; } #sobre { min-height: 500px; } #sobre .row { min-height: 340px; } #sobre .col-lg-6 { min-height: 320px; } } /* custom.css - ajustes de performance (CLS + scroll top) */ :root { --primary: #0c8ce0; --primary-dark: #0a6eb8; --hero-fallback-bg: #1a1a2e; } /* Prevenção de CLS no hero/carousel */ #heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item, .hero-carousel, .hero-carousel .carousel-item { min-height: 500px; } #heroCarousel .carousel-item img, .hero-carousel .carousel-item img { width: 100%; height: 100%; object-fit: cover; } .hero-carousel, #hero { background-color: var(--hero-fallback-bg); overflow: hidden; } .carousel-caption.hero-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex !important; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; padding: 2rem; background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%); z-index: 10; } #heroCarousel .carousel-item .carousel-caption { visibility: visible; opacity: 1; } /* Botão back-to-top */ #backToTop, #scrollTopBtn { position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 50%; background-color: var(--primary); color: #fff; border: none; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.25s ease, background-color 0.2s ease; z-index: 1000; display: flex; align-items: center; justify-content: center; pointer-events: none; } #backToTop.visible, #backToTop.show, #scrollTopBtn.visible, #scrollTopBtn.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } #backToTop:hover, #scrollTopBtn:hover { background-color: var(--primary-dark); transform: translateY(0) scale(1.05); } #backToTop:active, #scrollTopBtn:active { transform: translateY(0) scale(0.95); } #backToTop i, #backToTop .bi, #scrollTopBtn i, #scrollTopBtn .bi { font-size: 1.5rem; line-height: 1; } @media (min-width: 768px) { #heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item, .hero-carousel, .hero-carousel .carousel-item { min-height: 550px; } } @media (min-width: 992px) { #heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item, .hero-carousel, .hero-carousel .carousel-item { min-height: 600px; } } /* Ícone branco (para botões outline-light) */ .icon-svg-white { width: 16px; height: 16px; display: inline-block; vertical-align: middle; filter: brightness(0) saturate(100%) invert(100%); } /* Ícone amarelo (para botões outline-warning) */ .icon-svg-warning { width: 16px; height: 16px; display: inline-block; vertical-align: middle; filter: brightness(0) saturate(100%) invert(80%) sepia(90%) saturate(800%) hue-rotate(350deg); } /* WhatsApp ícone (verde) */ .whatsapp-icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; filter: brightness(0) saturate(100%) invert(40%) sepia(100%) saturate(500%) hue-rotate(90deg); } /* Para garantir alinhamento vertical */ .btn img { vertical-align: middle; margin-top: -2px; } /* custom.css - ajustes de performance (CLS + scroll top) */ :root { --primary: #0c8ce0; --primary-dark: #0a6eb8; --hero-fallback-bg: #1a1a2e; } /* Prevenção de CLS no hero/carousel */ #heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item, .hero-carousel, .hero-carousel .carousel-item { min-height: 500px; } #heroCarousel .carousel-item img, .hero-carousel .carousel-item img { width: 100%; height: 100%; object-fit: cover; } .hero-carousel, #hero { background-color: var(--hero-fallback-bg); overflow: hidden; } .carousel-caption.hero-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex !important; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; padding: 2rem; background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%); z-index: 10; } #heroCarousel .carousel-item .carousel-caption { visibility: visible; opacity: 1; } /* Botão back-to-top */ #backToTop, #scrollTopBtn { position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 50%; background-color: var(--primary); color: #fff; border: none; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.25s ease, background-color 0.2s ease; z-index: 1000; display: flex; align-items: center; justify-content: center; pointer-events: none; } #backToTop.visible, #backToTop.show, #scrollTopBtn.visible, #scrollTopBtn.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } #backToTop:hover, #scrollTopBtn:hover { background-color: var(--primary-dark); transform: translateY(0) scale(1.05); } #backToTop:active, #scrollTopBtn:active { transform: translateY(0) scale(0.95); } #backToTop i, #backToTop .bi, #scrollTopBtn i, #scrollTopBtn .bi { font-size: 1.5rem; line-height: 1; } @media (min-width: 768px) { #heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item, .hero-carousel, .hero-carousel .carousel-item { min-height: 550px; } } @media (min-width: 992px) { #heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item, .hero-carousel, .hero-carousel .carousel-item { min-height: 600px; } } /* ========================================================= eventos.css Tempero da Ursa - Página de eventos (premium + mobile-first) - Bootstrap 5 + Bootstrap Icons - Sem CSS inline - Componentes com naming prefixado (tu-*) ========================================================= */ :root { --tu-accent: #F4C10F; --tu-accent-strong: #D9A800; --tu-ink: #151515; --tu-muted: #6C757D; --tu-surface: #FFFFFF; /* Fundo alternado (cor sim / cor não) levemente amarelado */ --tu-surface-alt: #FFF9E6; --tu-border: rgba(15, 15, 15, 0.10); --tu-shadow-sm: 0 10px 24px rgba(15, 15, 15, 0.08); --tu-shadow-md: 0 18px 44px rgba(15, 15, 15, 0.12); --tu-radius-lg: 22px; --tu-radius-md: 16px; --tu-transition: 220ms ease; /* Tokens auxiliares (CTA) */ --ursa-cta-radius: 999px; --ursa-cta-minh: 46px; --ursa-cta-gap: 0.55rem; } body { color: var(--tu-ink); /* Evita “faixa branca” quando o conteúdo termina antes do viewport (mobile) */ background: var(--tu-surface-alt); } /* ========================================================= Botões (cards de ação) ========================================================= */ .tu-action-buttons { gap: 0.9rem; } /* ========================================================= CTAs (padrão reutilizável) - Usar junto com Bootstrap (`.btn`, `btn-warning`, etc.) - Mobile-first, com ícones e alturas consistentes ========================================================= */ .ursa-cta { min-height: var(--ursa-cta-minh); padding: 0.65rem 1rem; border-radius: var(--ursa-cta-radius) !important; display: inline-flex; align-items: center; justify-content: center; gap: var(--ursa-cta-gap); font-weight: 800; line-height: 1.1; } .ursa-cta i { font-size: 1.05em; line-height: 1; } .ursa-cta--primary { box-shadow: 0 14px 26px rgba(0, 0, 0, 0.16); } .ursa-cta--secondary { font-weight: 700; } .ursa-cta--support { font-weight: 700; text-decoration: none; } .ursa-actions { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (max-width: 575.98px) { .ursa-actions--mobile { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ursa-actions--mobile .ursa-cta { padding-left: 0.75rem; padding-right: 0.75rem; font-weight: 800; white-space: nowrap; } } @media (min-width: 576px) { .ursa-actions { grid-template-columns: 1fr; } } /* ========================================================= Galeria de eventos (padronização de tamanho) - Cards 4:3 com crop via object-fit ========================================================= */ #tuGaleriaEventos .tu-gallery-card { height: 100%; border-radius: var(--tu-radius-lg); overflow: hidden; border: 1px solid var(--tu-border); box-shadow: var(--tu-shadow-md); background: #111; margin: 0; } #tuGaleriaEventos .tu-gallery-card__media { position: relative; aspect-ratio: 4 / 3; width: 100%; background: #111; } #tuGaleriaEventos .tu-gallery-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.01); transition: transform 320ms ease, filter 320ms ease; will-change: transform; display: block; } #tuGaleriaEventos .tu-gallery-card:hover .tu-gallery-card__img { transform: scale(1.06); filter: saturate(1.04); } /* ========================================================= Acessibilidade ========================================================= */ .tu-skip-link { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 2000; padding: 0.6rem 0.9rem; border-radius: 999px; background: #111; color: #fff; text-decoration: none; transform: translateY(-140%); transition: transform var(--tu-transition); } .tu-skip-link:focus { transform: translateY(0); } /* ========================================================= Navbar (transparente → sólida no scroll) ========================================================= */ .tu-navbar { --tu-nav-bg: rgba(15, 15, 15, 0.45); background: var(--tu-nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.10); transition: background var(--tu-transition), box-shadow var(--tu-transition), padding var(--tu-transition); padding: 0.85rem 0; } .tu-navbar.is-scrolled, .tu-navbar.is-expanded { background: rgba(15, 15, 15, 0.92); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); padding: 0.6rem 0; border-bottom-color: rgba(255, 255, 255, 0.08); } .tu-navbar__brand { display: inline-flex; align-items: center; gap: 0.75rem; } .tu-navbar__logo { height: 34px; width: auto; display: block; } .tu-navbar__logo--dark, .tu-navbar__logo--fallback { display: none; } .tu-navbar__logo--light { display: block; } .tu-navlink { border-radius: 999px; padding: 0.55rem 0.95rem; transition: background var(--tu-transition), color var(--tu-transition), transform var(--tu-transition); } .tu-navbar .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.92); font-weight: 700; } .tu-navlink:hover, .tu-navlink:focus { background: rgba(244, 193, 15, 0.18); color: #fff; transform: translateY(-1px); } .tu-navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.25); } .tu-navbar .navbar-toggler:focus { box-shadow: 0 0 0 0.25rem rgba(244, 193, 15, 0.22); } .tu-btn-nav { padding: 0.55rem 1.05rem; box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22); } .navbar-toggler { border: 1px solid rgba(255, 255, 255, 0.25); } /* ========================================================= Hero ========================================================= */ .tu-hero { min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .tu-hero__media { position: absolute; inset: 0; } .tu-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.02); } .tu-hero__overlay { position: absolute; inset: 0; background: radial-gradient(800px circle at 18% 22%, rgba(244, 193, 15, 0.16), rgba(0, 0, 0, 0) 55%), linear-gradient(105deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.58) 45%, rgba(0, 0, 0, 0.38) 100%); } .tu-hero__container { position: relative; z-index: 2; padding-top: 5.5rem; padding-bottom: 3rem; } .tu-hero__title { color: #fff; font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(2.1rem, 5.5vw, 4.25rem); text-shadow: 0 16px 42px rgba(0, 0, 0, 0.40); } .tu-hero__lead { color: rgba(255, 255, 255, 0.88); font-size: clamp(1.05rem, 2.2vw, 1.25rem); max-width: 42rem; } .tu-btn-hero { padding: 0.95rem 1.45rem; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30); } .tu-btn-hero:hover { background-color: var(--tu-accent-strong); border-color: var(--tu-accent-strong); } .tu-btn-hero-outline:hover { background: rgba(255, 255, 255, 0.12); } .tu-highlight { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0.95rem; border-radius: 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.92); } .tu-highlight i { color: var(--tu-accent); font-size: 1.1rem; } /* ========================================================= Seções, tipografia e utilitários da página ========================================================= */ .tu-section { padding: clamp(3.2rem, 6vw, 5.2rem) 0; background: var(--tu-surface); position: relative; } .tu-section--alt { background: var(--tu-surface-alt); } /* Alternância automática de fundo (cor sim / cor não) nas seções dentro do conteúdo */ main#conteudo > section.tu-section:nth-of-type(even) { background: var(--tu-surface-alt); } .tu-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(15, 15, 15, 0.10), transparent); pointer-events: none; } .tu-section::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.035)); pointer-events: none; } .tu-section--alt::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); } main#conteudo > section.tu-section:nth-of-type(even)::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); } .tu-section, header.tu-hero { scroll-margin-top: 92px; } /* ========================================================= CTAs (Seção Espaço) - Aumenta destaque sem mexer em layout/estrutura ========================================================= */ #espaco .tu-btn-secondary.btn-dark, #espaco .tu-btn-secondary.btn-outline-dark { min-height: 48px; padding: 0.85rem 1.15rem; border-width: 2px; } #espaco .tu-btn-secondary.btn-dark { box-shadow: 0 18px 44px rgba(15, 15, 15, 0.14); } #espaco .tu-btn-secondary.btn-outline-dark { box-shadow: 0 10px 24px rgba(15, 15, 15, 0.08); } .tu-eyebrow { font-weight: 700; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(21, 21, 21, 0.68); } .tu-h2 { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; font-size: clamp(1.75rem, 3.4vw, 2.6rem); } .tu-h3 { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; font-size: clamp(1.35rem, 2.4vw, 1.75rem); } .tu-title-accent { color: var(--tu-accent-strong); } /* ========================================================= Carrossel "O Espaço": versão mais compacta (menos alto) - Mantém HTML intacto (ratio via CSS) ========================================================= */ #carouselEspaco .ratio { --bs-aspect-ratio: 62%; } @media (min-width: 992px) { #carouselEspaco .ratio { --bs-aspect-ratio: 56%; } } .tu-cover { object-fit: cover; object-position: center; } /* ========================================================= Carrossel (melhor UX + acabamento premium) ========================================================= */ .tu-carousel { position: relative; } .tu-carousel__inner { border-radius: var(--tu-radius-lg); overflow: hidden; box-shadow: var(--tu-shadow-md); border: 1px solid var(--tu-border); background: #000; } .tu-carousel--wide .carousel-indicators { margin-bottom: 0.9rem; } .tu-carousel .carousel-control-prev, .tu-carousel .carousel-control-next { position: absolute; width: 4rem; opacity: 0.95; transition: opacity var(--tu-transition); } .tu-carousel .carousel-control-prev:hover, .tu-carousel .carousel-control-next:hover { opacity: 1; } /* Galeria: indicadores em amarelo */ .tu-carousel--gallery .carousel-indicators { display: none; margin-bottom: 0.85rem; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; justify-content: center; padding: 0 0.75rem; -webkit-overflow-scrolling: touch; } .tu-carousel--gallery .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 999px; background-color: rgba(244, 193, 15, 0.45); opacity: 1; } .tu-carousel--gallery .carousel-indicators .active { background-color: var(--tu-accent); } .tu-carousel--gallery .carousel-indicators::-webkit-scrollbar { height: 0; } /* Galeria: altura um pouco menor no mobile */ .tu-carousel--gallery .ratio { --bs-aspect-ratio: 52%; } @media (min-width: 992px) { .tu-carousel--gallery .ratio { --bs-aspect-ratio: 46%; } } .tu-carousel--gallery { max-width: 920px; margin-left: auto; margin-right: auto; } @media (max-width: 575.98px) { .tu-carousel--gallery { max-width: 92vw; } } .tu-gallery-carousel__img { transform: scale(1.01); transition: transform 300ms ease, filter 300ms ease; } .tu-carousel--gallery:hover .tu-gallery-carousel__img { transform: scale(1.04); filter: saturate(1.05); } /* Controles: melhora contraste + cor premium (sem depender de ícones não incluídos no purge) */ .tu-carousel .carousel-control-prev-icon, .tu-carousel .carousel-control-next-icon { opacity: 0; } .tu-carousel .carousel-control-prev::after, .tu-carousel .carousel-control-next::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 999px; background: rgba(15, 15, 15, 0.35); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .tu-carousel .carousel-control-prev::before, .tu-carousel .carousel-control-next::before { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-right: 3px solid var(--tu-accent); border-bottom: 3px solid var(--tu-accent); z-index: 2; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35)); } .tu-carousel .carousel-control-prev::before { transform: translate(-50%, -50%) rotate(135deg); } .tu-carousel .carousel-control-next::before { transform: translate(-50%, -50%) rotate(-45deg); } .tu-carousel .carousel-control-prev:hover::after, .tu-carousel .carousel-control-next:hover::after { background: rgba(15, 15, 15, 0.50); } .tu-carousel .carousel-control-prev:focus-visible::after, .tu-carousel .carousel-control-next:focus-visible::after { outline: 3px solid rgba(244, 193, 15, 0.55); outline-offset: 3px; } /* ========================================================= Cards (premium + hover suave) ========================================================= */ .tu-card, .tu-mini-card, .tu-feature-card, .tu-icon-card { background: var(--tu-surface); border: 1px solid var(--tu-border); border-radius: var(--tu-radius-lg); box-shadow: var(--tu-shadow-sm); transition: transform var(--tu-transition), box-shadow var(--tu-transition), border-color var(--tu-transition); } .tu-card:hover, .tu-feature-card:hover, .tu-icon-card:hover { transform: translateY(-4px); box-shadow: var(--tu-shadow-md); border-color: rgba(15, 15, 15, 0.14); } .tu-card__body { padding: 1.5rem; } .tu-mini-card { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1rem 1.1rem; } .tu-mini-card i { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(244, 193, 15, 0.14); color: #111; font-size: 1.1rem; flex: 0 0 auto; } .tu-feature-card { display: flex; align-items: flex-start; gap: 0.95rem; padding: 1rem 1.1rem; height: 100%; } .tu-feature-card__icon { width: 80px; height: 80px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: rgba(244, 193, 15, 0.14); color: #111; font-size: 1.6rem; flex: 0 0 auto; } .tu-checklist { list-style: none; padding-left: 0; margin: 0; } .tu-checklist li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.25rem 0; } .tu-checklist li i { color: var(--tu-accent-strong); font-size: 1.05rem; margin-top: 0.1rem; flex: 0 0 auto; } .tu-checklist li span { color: rgba(21, 21, 21, 0.82); } /* ========================================================= Como chegar (mapa + card de endereço) ========================================================= */ .tu-address-card .tu-card__body { padding: 1.4rem; } .tu-address-list { display: grid; gap: 0.95rem; } .tu-address-item { display: flex; gap: 0.85rem; align-items: flex-start; } .tu-address-item i { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: rgba(244, 193, 15, 0.14); color: #111; font-size: 1.15rem; flex: 0 0 auto; } .tu-map-card { border-radius: var(--tu-radius-lg); overflow: hidden; border: 1px solid var(--tu-border); box-shadow: var(--tu-shadow-md); background: #111; } .ursa-map-card { border-radius: var(--tu-radius-lg); overflow: hidden; border: 1px solid var(--tu-border); box-shadow: 0 22px 60px rgba(15, 15, 15, 0.18); background: #111; } .ursa-map-frame { width: 100%; min-height: 280px; } @media (min-width: 992px) { .ursa-map-frame { min-height: 360px; } } .tu-map-embed { width: 100%; height: 100%; border: 0; display: block; } .tu-icon-badge { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; background: rgba(244, 193, 15, 0.16); color: #111; margin: 0 auto 0.85rem; font-size: 1.35rem; } .tu-icon-badge--lg { width: 58px; height: 58px; border-radius: 20px; font-size: 1.55rem; } .tu-icon-card { padding: 1.1rem 1rem; } .tu-icon-card__icon { color: var(--tu-accent-strong); font-size: 1.6rem; margin-bottom: 0.35rem; } /* ========================================================= Diferenciais (como na referência: ícone grande + texto, em grid) ========================================================= */ .tu-benefit-grid { max-width: 920px; margin-left: auto; margin-right: auto; } .tu-benefit-tile { padding: clamp(1.2rem, 2.8vw, 2rem) 0.75rem; border-radius: 18px; transition: transform var(--tu-transition), opacity var(--tu-transition); } .tu-benefit-tile:hover { transform: translateY(-3px); opacity: 0.98; } .tu-benefit-tile__icon { margin: 0 auto 0.9rem; display: inline-flex; align-items: center; justify-content: center; color: var(--tu-accent); filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.10)); } .tu-benefit-tile__icon i { font-size: clamp(3.4rem, 5vw, 4.4rem); line-height: 1; } .tu-benefit-tile__title { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 800; letter-spacing: -0.02em; margin: 0; } .tu-benefit-tile__text { color: var(--tu-ink); opacity: 0.92; max-width: 22rem; margin-left: auto; margin-right: auto; } @media (min-width: 992px) { .tu-benefit-grid { max-width: 980px; } .tu-benefit-tile { padding: 2.1rem 1rem; } } /* ========================================================= Galeria destaque (3 fotos em cards grandes) ========================================================= */ .tu-photo-card { margin: 0; border-radius: var(--tu-radius-lg); overflow: hidden; border: 1px solid rgba(15, 15, 15, 0.10); box-shadow: var(--tu-shadow-md); background: #111; transform: translateZ(0); } .tu-event-gallery { max-width: 1100px; margin-left: auto; margin-right: auto; } .tu-ratio-3x4 { --bs-aspect-ratio: 133.333%; } .tu-photo-card--featured { box-shadow: 0 24px 58px rgba(15, 15, 15, 0.16); } .tu-photo-card--featured .tu-photo-card__img { transform: scale(1.015); } .tu-photo-card--featured:hover .tu-photo-card__img { transform: scale(1.05); } .tu-photo-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.02); transition: transform 320ms ease, filter 320ms ease; will-change: transform; } .tu-photo-card:hover .tu-photo-card__img { transform: scale(1.06); filter: saturate(1.05); } /* ========================================================= Galeria (masonry leve com hover zoom) ========================================================= */ .tu-masonry { column-count: 2; column-gap: 1rem; } .tu-gallery-item { break-inside: avoid; margin: 0 0 1rem; border-radius: var(--tu-radius-md); overflow: hidden; box-shadow: var(--tu-shadow-sm); border: 1px solid rgba(15, 15, 15, 0.10); background: #111; } .tu-gallery-img { width: 100%; height: auto; display: block; transform: scale(1.01); transition: transform 280ms ease, filter 280ms ease; will-change: transform; } .tu-gallery-item:hover .tu-gallery-img { transform: scale(1.06); filter: saturate(1.04); } @media (min-width: 768px) { .tu-masonry { column-count: 3; column-gap: 1.1rem; } } @media (min-width: 992px) { .tu-masonry { column-count: 4; column-gap: 1.2rem; } } /* ========================================================= Modal / Praja ========================================================= */ .tu-modal { border-radius: var(--tu-radius-lg); overflow: hidden; border: 1px solid var(--tu-border); } .tu-modal__body { padding: 0.75rem; background: var(--tu-surface-alt); min-height: 70vh; } .tu-praja-container { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid rgba(15, 15, 15, 0.10); min-height: 920px; } @media (max-width: 576px) { .tu-modal { border-radius: 0; } .modal-fullscreen-sm-down .tu-modal__body { min-height: calc(100vh - 56px); padding: 0.65rem; } .tu-praja-container { min-height: calc(100vh - 56px - 1.3rem); border-radius: 16px; } } /* ========================================================= WhatsApp flutuante (classe consistente + acessível) ========================================================= */ .tu-whatsapp-float { position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #25D366; color: #fff; text-decoration: none; z-index: 1100; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22); transition: transform var(--tu-transition), filter var(--tu-transition); } .tu-whatsapp-float::before { content: ""; position: absolute; inset: -10px; border-radius: 999px; background: rgba(37, 211, 102, 0.18); opacity: 0; transform: scale(0.92); z-index: -1; } .tu-whatsapp-float i { font-size: 1.55rem; line-height: 1; } /* ========================================================= Scroll to top (mobile-first) - Usado por assets/js/scroll-top.js (classe .visible) ========================================================= */ .tu-scroll-top { position: fixed; left: 22px; bottom: 104px; /* acima do WhatsApp */ width: 80px; height: 80px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--tu-accent); color: #111; text-decoration: none; z-index: 1100; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity var(--tu-transition), transform var(--tu-transition), filter var(--tu-transition); } .tu-scroll-top i { font-size: 2rem; line-height: 1; } .tu-scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .tu-scroll-top:hover { filter: brightness(0.98); transform: translateY(-2px); } .tu-scroll-top:focus-visible { outline: 3px solid rgba(244, 193, 15, 0.55); outline-offset: 3px; } .tu-whatsapp-float:hover { transform: translateY(-2px) scale(1.03); filter: brightness(0.98); } .tu-whatsapp-float:focus-visible { outline: 3px solid rgba(244, 193, 15, 0.55); outline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { .tu-whatsapp-float::before { animation: tu-whatsapp-ring 3.2s ease-out infinite; } .tu-whatsapp-float i { animation: tu-whatsapp-wiggle 3.6s ease-in-out infinite; transform-origin: 50% 60%; } } @keyframes tu-whatsapp-ring { 0% { opacity: 0; transform: scale(0.92); } 18% { opacity: 0.75; } 45% { opacity: 0; transform: scale(1.08); } 100% { opacity: 0; transform: scale(1.08); } } @keyframes tu-whatsapp-wiggle { 0%, 74%, 100% { transform: rotate(0deg) translateX(0); } 78% { transform: rotate(-10deg) translateX(-1px); } 82% { transform: rotate(10deg) translateX(1px); } 86% { transform: rotate(-8deg) translateX(-1px); } 90% { transform: rotate(8deg) translateX(1px); } 94% { transform: rotate(0deg) translateX(0); } } /* ========================================================= Animações (inspiradas em landing pages modernas) - Sem bibliotecas externas (IntersectionObserver no JS) - Respeita prefers-reduced-motion ========================================================= */ .tu-reveal { opacity: 0; transform: translateY(14px); transition: opacity 520ms ease, transform 620ms cubic-bezier(0.2, 0.9, 0.2, 1); will-change: opacity, transform; } .tu-reveal.is-inview { opacity: 1; transform: translateY(0); } .tu-reveal--d0 { transition-delay: 0ms; } .tu-reveal--d1 { transition-delay: 80ms; } .tu-reveal--d2 { transition-delay: 160ms; } .tu-reveal--d3 { transition-delay: 240ms; } .tu-reveal--d4 { transition-delay: 320ms; } @media (prefers-reduced-motion: reduce) { .tu-reveal { opacity: 1; transform: none; transition: none; } .tu-whatsapp-float { animation: none; } .tu-whatsapp-float::before { animation: none; } .tu-whatsapp-float i { animation: none; } } @media (prefers-reduced-motion: no-preference) { .tu-hero .tu-eyebrow, .tu-hero__title, .tu-hero__lead, .tu-hero .tu-btn-hero, .tu-hero .tu-btn-hero-outline, .tu-hero__highlights { animation: tu-hero-in 720ms cubic-bezier(0.2, 0.9, 0.2, 1) both; } .tu-hero .tu-eyebrow { animation-delay: 60ms; } .tu-hero__title { animation-delay: 120ms; } .tu-hero__lead { animation-delay: 190ms; } .tu-hero .tu-btn-hero, .tu-hero .tu-btn-hero-outline { animation-delay: 260ms; } .tu-hero__highlights { animation-delay: 340ms; } } @keyframes tu-hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }