/* San Francisco font fallback */
body {
    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


.sidebar {
    position: sticky;
    top: 100px;
}

.sidebar a {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #007AFF;
    text-decoration: none;
}

.sidebar a:hover {
    text-decoration: underline;
}

.section-title {
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.section-description {
    font-size: 1.1rem;
    color: #333;
}

.help-img {
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    max-width: 100%;
    margin: 1.5rem 0;
}

.title-header {
    background: #4ba198;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 800;
}

.bg-header-box {
    background-color: #F4ADAD;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
}

.anchor-link {
    scroll-margin-top: 100px;
}

.active-link {
    font-weight: 700;
    color: #F4ADAD;
}

@media (max-width: 768px) {
    .sidebar {
        position: static;
        margin-bottom: 2rem;
        text-align: center;
    }
}

.hero-section {
    background: url('../img/bg-gradient.jpg') no-repeat center center;
    background-size: cover;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    padding: 60px 20px;
}

.hero-icon {
    width: 200px;
    height: auto;
}

.hero-title {
    font-size: 3rem;
    /* Default: Headline 88 */
    font-weight: 700;
}

.hero-subtitle {
    font-size: 1.5rem;
    /* Callout 40 */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-note {
    font-size: 1.1rem;
    /* Medium 72 adaptado */
}

.hero-fineprint {
    font-size: 0.9rem;
    /* Fineprint 24 */
    color: rgba(255, 255, 255, 0.8);
}

.btn {
    border-radius: 63px !important;
    width: 200px !important;
    padding: 15px !important;
}

.clipboard-headline {
    font-size: 3rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .ui-img {
        max-width: 45%;
        height: auto;
    }
}

.clipboard-description {
    font-size: 1.8rem;
    max-width: 700px;
    font-weight: 550;
    line-height: 1.4;
}

.gradient-text {
    background: linear-gradient(90deg, #A855F7, #EC4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* HIstory section */
.history-title {
    font-size: 4.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.text-highlight {
    color: #5EEAD4;
}

.history-description {
    font-size: 1.8rem;
    font-weight: 550;
    line-height: 1.6;
    color: #ccc;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .history-title {
        font-size: 2rem;
    }

    .history-description {
        font-size: 1.05rem;
    }
}

/* Imagem maior no desktop */
.history-image {
    max-width: 100%;
}

@media (min-width: 992px) {
    .history-image {
        max-width: 130%;
        /* aumenta além do container col-6 */
        transform: scale(1.1);
        /* opcional: dá uma sensação de destaque */
    }
}

/* HIstory section  END*/

/* quick paste section */

.quick-title {
    font-size: 4.75rem;
    font-weight: 800;
    line-height: 1.2;
}

.quick-description {
    font-size: 1.1rem;
    font-weight: 500;
    color: #222;
    max-width: 500px;
}

.quick-image {
    max-width: 90%;
    height: auto;
}

/* Responsivo */
@media (max-width: 768px) {
    .quick-title {
        font-size: 2.25rem;
    }

    .quick-description {
        font-size: 1.05rem;
    }

    .quick-image {
        max-width: 100%;
    }
}

.quick-image-left {
    width: 100%;
    max-width: 650px;
    height: auto;
    margin-left: 0;
}

@media (min-width: 992px) {
    .quick-image-left {
        margin-left: 40px;
        /* empurra a imagem pra fora do container */
    }
}

@media (max-width: 991px) {
    .quick-image-left {
        margin-left: auto;
        margin-right: auto;
    }
}

/* quick paste section END*/

/* Responsivo */
@media (max-width: 768px) {
    .clipboard-headline {
        font-size: 2rem;
    }

    .clipboard-description {
        font-size: 1.1rem;
    }
}

/* Responsivo */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.25rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .hero-note,
    .hero-fineprint {
        font-size: 0.95rem;
    }
}

/* pin */
.pin-description {
    font-size: 1.8rem;
    font-weight: 550;
    line-height: 1.4;
}

.dark-text-brown {
    color: #5E1E2B;
}

.dark-text-orange {
    color: #F5B561;
}

@media (max-width: 768px) {
    .pin-description {
        font-size: 1.05rem;
    }
}

/* short cut */
.shortcut-title {
    font-size: 4.75rem;
    /* Large 120 */
    font-weight: 800;
    line-height: 1.2;
}

.text-gray {
    color: #7e7e7e;
}

.text-yellow {
    color: #FBCB50;
}

.text-pink {
    color: #ff94bb;
}

.text-salmon {
    color: #E36658;
}

.text-apple-blue {
    color: #007AFF;
}

.shortcut-description {
    font-size: 1.8rem;
    font-weight: 550;
    line-height: 1.4;
}

.bg-torquoise-blue {
    background-color: #99F6E4;
}

.bg-light-red {
    background-color: #fa969a;
}

.text-light-yellow {
    color: #F9E795;
}

@media (max-width: 768px) {
    .shortcut-title {
        font-size: 2.25rem;
        text-align: center;
    }

    .shortcut-description {
        font-size: 1rem;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}

.shortcut-image {
    max-width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    .shortcut-image {
        max-width: 660px;
    }
}

/* Gesture Trigger */
.gesture-title {
    font-size: 4.75rem;
    font-weight: 800;
    line-height: 1.2;
}

.gradient-text-hot {
    background: linear-gradient(90deg, #E1704F 0%, #CF617E 52%, #6B84BC 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.gesture-description {
    font-size: 1.8rem;
    font-weight: 550;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .gesture-title {
        font-size: 2.25rem;
        text-align: center;
    }

    .gesture-description {
        font-size: 1rem;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .gesture-image {
        max-width: 100%;
        height: auto;
    }
}

/* Footer */
.footer-section {
    background-color: #1E1E23;
    color: #ccc;
}

.footer-link {
    color: #aaa;
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: underline;
    color: #fff;
}

/*search section*/
.bg-search-section {
    background-color: #F4ADAD;
}

.search-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.text-search {
    color: #008080;
}

.text-wine {
    color: #9A005B;
}

.search-image-bottom {
    width: 100%;
    max-width: 800px;
    margin-top: -20px;
    margin-bottom: -50px;
}

.search-description {
    font-size: 1.8rem;
    font-weight: 550;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .search-title {
        font-size: 2rem;
    }

    .search-description {
        font-size: 1.05rem;
    }
}

.gradient-trial-text {
    background: linear-gradient(90deg, #FBCB50, #F59E6E, #F472B6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 600;
}


/* Icon transition effect */
.icon-transition-container {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  z-index: 1; /* menor que o conteúdo */
  pointer-events: none; /* não intercepta cliques */
  transition: top 0.5s ease, transform 0.5s ease, width 0.5s ease, height 0.5s ease;
}

.icon-transition-container img {
  position: absolute;
  width: 100%;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.icon-original {
  z-index: 2;
  opacity: 1;
  transform: scale(1);
}

.icon-floating {
  pointer-events: none;
  transform: scale(5);

}

/* Quando o usuário rola a página */
body.scrolled .icon-original {
  opacity: 0;
  transform: scale(0.8);
}

body.scrolled .icon-floating {
  pointer-events: auto;
  cursor: pointer;
}

body.scrolled .icon-transition-container {
  position: fixed;
  top: 25px;
  width: 60px;
  height: 60px;
  z-index: 30; /* aí sim, flutuando por cima */
}