/* =====================================
BMS ÓTICA — PÁGINA EXCLUSIVA
Arquivo: ./assets/bms-otica.css
===================================== */

:root {
  --otica-primary: #0f35a6;
  --otica-primary-light: #315ed8;
  --otica-accent: #8fc0ff;
  --otica-dark: #071a50;
  --otica-text-light: #ffffff;
  --otica-text-soft: rgba(255, 255, 255, 0.80);
  --otica-border: rgba(255, 255, 255, 0.18);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
}

/* Mantém o item Produtos destacado nesta página */
.nav-dropdown-trigger.active {
  color: #7e8fff;
  font-weight: 700;
}

/* =====================================
SEÇÃO 1 — HERO
===================================== */

.otica-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 890px;
  padding-top: 90px;
  overflow: hidden;
  background: var(--otica-dark);
}

.otica-hero-background {
  position: absolute;
  z-index: -5;
  inset: 0;
  background-image: url("../images/seção1paginabmsotica.png");
  background-repeat: no-repeat;
  background-position: calc(50% + 16px) center;
  background-size: cover;
  transform: scale(1.02);
}

.otica-hero-overlay {
  position: absolute;
  z-index: -4;
  inset: 0;
  background: linear-gradient(
  90deg,
  rgba(5, 18, 59, 0.92) 0%,
  rgba(7, 24, 75, 0.70) 25%,
  rgba(9, 34, 103, 0.42) 48%,
  rgba(9, 34, 103, 0.16) 72%,
  rgba(9, 34, 103, 0.00) 100%
);
}

.otica-hero-pattern {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, black 0%, transparent 72%);
}

.otica-hero-glow {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(12px);
}

.otica-hero-glow-one {
  width: 460px;
  height: 460px;
  left: -260px;
  top: 30%;
  background: radial-gradient(circle, rgba(49, 94, 216, 0.38), transparent 68%);
}

.otica-hero-glow-two {
  width: 300px;
  height: 300px;
  left: 42%;
  bottom: -190px;
  background: radial-gradient(circle, rgba(102, 167, 255, 0.22), transparent 70%);
}

.otica-hero-container {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 80px));
  margin: 0 auto;
}

.otica-hero-content {
  width: min(660px, 56%);
  padding: 80px 0 110px;
}



.otica-hero-logo-box img {
  width: 120px;
  height: 120px;
  padding: 6px;
  border-radius: 50%;
  object-fit: contain;
  
}

.otica-hero-logo-box span {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.otica-hero-title {
  max-width: 650px;
  transform: translateY(-110px);
  color: var(--otica-text-light);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(36px, 4.7vw, 40px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.otica-hero-title strong {
  display: block;
  margin-top: 8px;
  color: #081333;
  font-weight: 800;
}

.otica-hero-description {
  max-width: 610px;
  margin: 30px 0 0;
  color: var(--otica-text-soft);
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  transform: translateY(-90px);
}

.otica-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 38px;
  transform: translateY(-20px);
}

.otica-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 25px;
  border-radius: 9px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.otica-button-primary {
  color: var(--otica-primary);
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.20);
}

.otica-button-primary:hover {
  color: var(--otica-primary);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}

.otica-button-primary i {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.otica-button-primary:hover i {
  transform: translateX(5px);
}

.otica-button-secondary {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

.otica-button-secondary:hover {
  color: #ffffff;
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.14);
}

.otica-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  color: var(--otica-primary);
  background: #ffffff;
}

.otica-button-icon i {
  margin-left: 2px;
  font-size: 15px;
}

.otica-hero-benefits {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 50px;
  margin-bottom: 20px;
}

.otica-benefit {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.76);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.otica-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(102, 167, 255, 0.25);
}

.otica-benefit-icon i {
  font-size: 14px;
}

.otica-hero-scroll {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 28px;
  height: 46px;
  padding-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  transform: translateX(-50%);
}

.otica-hero-scroll span {
  width: 4px;
  height: 9px;
  border-radius: 4px;
  background: #ffffff;
  animation: oticaScroll 1.8s ease-in-out infinite;
}

@keyframes oticaScroll {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* =====================================
SEÇÃO 2 — CRESCIMENTO DA ÓTICA
===================================== */

.otica-growth-section{

    position: relative;

    width: 100%;

    margin: 0;

    padding: 60px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f8faff 0%,
            #eef3fb 100%
        );

}


/* ELEMENTO DECORATIVO */

.otica-growth-section::before {

    content: "";

    position: absolute;

    width: 540px;

    height: 540px;

    top: -330px;

    right: -210px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(15, 53, 166, 0.12),
            transparent 68%
        );

    pointer-events: none;

}


/* =====================================
CONTAINER
===================================== */

.otica-growth-container{

    width: min(1380px, calc(100% - 80px));

    margin: 0 auto;

}


/* =====================================
CABEÇALHO
===================================== */

.otica-growth-header {

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(280px, 0.7fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 72px;

}


.otica-growth-heading {

    max-width: 780px;

}


.otica-growth-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #0f35a6;

    font-family: "Montserrat", sans-serif;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;

}


.otica-growth-tag::before {

    content: "";

    width: 34px;

    height: 2px;

    border-radius: 10px;

    background: #0f35a6;

}


.otica-growth-heading h2 {

    margin: 0;

    color: #101b3e;

    font-family: "Montserrat", sans-serif;

    font-size: clamp(38px, 4.1vw, 59px);

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -0.04em;

}


.otica-growth-heading h2 strong {

    color: #0f35a6;

    font-weight: 800;

}


.otica-growth-intro {

    max-width: 430px;

    margin: 0 0 5px auto;

    padding-left: 25px;

    border-left: 2px solid rgba(15, 53, 166, 0.18);

    color: #5d6781;

    font-family: "Poppins", sans-serif;

    font-size: 16px;

    line-height: 1.8;
    transform: translateY(-90px);

}


/* =====================================
GRID PRINCIPAL
===================================== */

.otica-growth-grid{
    display:grid;
    grid-template-columns: 42% 58%;
    gap:40px;
    align-items:center;
}


/* =====================================
LADO ESQUERDO
===================================== */

.otica-growth-content {

    min-width: 0;

}


/* =====================================
CARDS NUMERADOS
===================================== */

.otica-growth-options {

    display: grid;

    gap: 12px;

}


.otica-growth-option {

    position: relative;

    display: grid;

    grid-template-columns:
        60px
        minmax(0, 1fr)
        42px;

    align-items: center;

    gap: 16px;

    width: 100%;

    min-height: 94px;

    padding: 15px 18px;

    overflow: hidden;

    border: 1px solid rgba(21, 38, 81, 0.1);

    border-radius: 17px;

    text-align: left;

    cursor: pointer;

    background: rgba(255, 255, 255, 0.72);

    box-shadow:
        0 12px 32px rgba(29, 47, 92, 0.05);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;

}


.otica-growth-option::before {

    content: "";

    position: absolute;

    width: 5px;

    height: 0;

    left: 0;

    top: 50%;

    border-radius: 0 10px 10px 0;

    background: #0f35a6;

    transform: translateY(-50%);

    transition: height 0.3s ease;

}


.otica-growth-option:hover {

    transform: translateX(6px);

    border-color: rgba(15, 53, 166, 0.2);

    background: #ffffff;

    box-shadow:
        0 18px 40px rgba(29, 47, 92, 0.1);

}


.otica-growth-option.active {

    border-color: rgba(15, 53, 166, 0.2);

    background: #ffffff;

    box-shadow:
        0 22px 48px rgba(26, 54, 122, 0.13);

}


.otica-growth-option.active::before {

    height: 54px;

}


/* NÚMERO */

.otica-growth-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    border-radius: 14px;

    color: #6d7894;

    font-family: "Montserrat", sans-serif;

    font-size: 15px;

    font-weight: 800;

    background: #eef2f9;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;

}


.otica-growth-option.active .otica-growth-number {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0f35a6,
            #315ed8
        );

    box-shadow:
        0 12px 25px rgba(15, 53, 166, 0.26);

}


/* TEXTO */

.otica-growth-option-text {

    display: flex;

    min-width: 0;

    flex-direction: column;

    gap: 5px;

}


.otica-growth-option-text strong {

    color: #152651;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    font-weight: 750;

}


.otica-growth-option-text small {

    color: #7a849d;

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    font-weight: 400;

}


/* SETA */

.otica-growth-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    border-radius: 50%;

    color: #8791a8;

    background: #f0f3f8;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;

}


.otica-growth-option.active .otica-growth-arrow {

    color: #ffffff;

    background: #0f35a6;

    transform: rotate(-35deg);

}


/* =====================================
CARD DESCRITIVO
===================================== */

.otica-growth-description-card {

    position: relative;

    min-height: 270px;

    margin-top: 22px;

    padding: 30px;

    overflow: hidden;

    border: 1px solid rgba(15, 53, 166, 0.1);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #0a286f 0%,
            #0f35a6 54%,
            #2757cb 100%
        );

    box-shadow:
        0 24px 50px rgba(15, 53, 166, 0.2);

}


.otica-growth-description-card::after {

    content: "";

    position: absolute;

    width: 210px;

    height: 210px;

    right: -110px;

    bottom: -115px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 50%;

}


.otica-growth-description {

    position: relative;

    z-index: 2;

    display: none;

    grid-template-columns: 50px 1fr;

    gap: 19px;

    color: #ffffff;

}


.otica-growth-description.active {

    display: grid;

    animation:
        oticaGrowthFade 0.45s ease both;

}


@keyframes oticaGrowthFade {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


.otica-growth-description-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 14px;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(10px);

}


.otica-growth-description-icon i {

    font-size: 21px;

}


.otica-growth-description-label {

    display: block;

    margin-bottom: 9px;

    color: rgba(255, 255, 255, 0.68);

    font-family: "Montserrat", sans-serif;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}


.otica-growth-description h3 {

    margin: 0;

    color: #ffffff;

    font-family: "Montserrat", sans-serif;

    font-size: 23px;

    font-weight: 750;

    line-height: 1.28;

}


.otica-growth-description p {

    margin: 15px 0 0;

    color: rgba(255, 255, 255, 0.76);

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    line-height: 1.8;

}


/* =====================================
CHAMADA
===================================== */

.otica-growth-cta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 27px;

}


.otica-growth-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    min-height: 54px;

    padding: 0 22px;

    border-radius: 9px;

    color: #ffffff;

    font-family: "Montserrat", sans-serif;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

    background: #0f35a6;

    box-shadow:
        0 15px 32px rgba(15, 53, 166, 0.2);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;

}


.otica-growth-button:hover {

    color: #ffffff;

    transform: translateY(-4px);

    background: #1948c6;

    box-shadow:
        0 21px 38px rgba(15, 53, 166, 0.27);

}


.otica-growth-cta > span {

    max-width: 210px;

    color: #7c869d;

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    line-height: 1.5;

}


/* =====================================
CARD DO DASHBOARD
===================================== */

.otica-growth-dashboard {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: calc(100% + 100px);
    min-height: 650px;

    transform: translateX(30px);
}


.otica-growth-dashboard-glow {

    position: absolute;

    width: 480px;

    height: 480px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(49, 94, 216, 0.24),
            transparent 68%
        );

    filter: blur(8px);

}

.otica-growth-dashboard {
    justify-content: flex-start;
    overflow: visible;
}

.otica-growth-dashboard-card {
    width: calc(100% + -100px) !important;
    max-width: none !important;

    flex-grow: 0;
    flex-shrink: 0;

    box-sizing: border-box;
}


.otica-growth-dashboard-card {

    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 750px;

    padding: 16px;

    border: 1px solid rgba(17, 41, 98, 0.1);

    border-radius: 27px;

    background: rgba(255, 255, 255, 0.93);

    box-shadow:
        0 35px 80px rgba(25, 50, 111, 0.18);

    backdrop-filter: blur(14px);

    transform: translateY(-115px);

}


/* TOPO */

.otica-growth-dashboard-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 5px 7px 15px;

    color: #68738d;

    font-family: "Poppins", sans-serif;

    font-size: 11px;

}


.otica-growth-dashboard-top > div {

    display: flex;

    align-items: center;

    gap: 8px;

}


.otica-growth-dashboard-status {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #28b778;

    box-shadow:
        0 0 0 5px rgba(40, 183, 120, 0.1);

}


.otica-growth-dashboard-brand {

    color: #0f35a6;

    font-family: "Montserrat", sans-serif;

    font-weight: 800;

}


/* IMAGEM */

.otica-growth-dashboard-image {

    position: relative;

    overflow: hidden;

    min-height: 415px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #e9eef8,
            #f8faff
        );

}





/* RODAPÉ DO CARD */

.otica-growth-dashboard-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 17px 7px 5px;

}


.otica-growth-dashboard-footer > div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.otica-growth-dashboard-footer span {

    color: #8a94aa;

    font-family: "Poppins", sans-serif;

    font-size: 11px;

}


.otica-growth-dashboard-footer strong {

    color: #192a54;

    font-family: "Montserrat", sans-serif;

    font-size: 14px;

    font-weight: 750;

}


.otica-growth-dashboard-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 43px;

    height: 43px;

    border-radius: 13px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0f35a6,
            #315ed8
        );

}


/* CARD FLUTUANTE */

.otica-growth-floating-card {

    position: absolute;

    z-index: 4;

    left: -36px;

    bottom: 65px;

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 265px;

    padding: 15px 17px;

    border: 1px solid rgba(255, 255, 255, 0.75);

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.92);

    box-shadow:
        0 22px 45px rgba(26, 47, 98, 0.16);

    backdrop-filter: blur(14px);

    animation:
        oticaFloatingCard 4s ease-in-out infinite;

}


@keyframes oticaFloatingCard {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}


.otica-growth-floating-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border-radius: 12px;

    color: #ffffff;

    background: #28b778;

}


.otica-growth-floating-card > div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.otica-growth-floating-card strong {

    color: #16264e;

    font-family: "Montserrat", sans-serif;

    font-size: 12px;

    font-weight: 800;

}


.otica-growth-floating-card span {

    color: #818ba1;

    font-family: "Poppins", sans-serif;

    font-size: 10px;

}

/* =====================================
ÁREA DAS IMAGENS DO SISTEMA
===================================== */

.otica-growth-dashboard-image {

    position: relative;

    overflow: hidden;

    min-height: 415px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #e9eef8,
            #f8faff
        );

}


/* TODAS AS IMAGENS */

.otica-growth-system-image {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;

    height: 100%;

    min-height: 415px;

    object-fit: cover;

    object-position: top center;

    opacity: 0;

    visibility: hidden;

    transform:
        scale(1.025)
        translateY(8px);

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease,
        transform 0.55s ease;

}


/* IMAGEM ATIVA */

.otica-growth-system-image.active {

    z-index: 2;

    opacity: 1;

    visibility: visible;

    transform:
        scale(1)
        translateY(0);

}

/* =====================================
SEÇÃO 3 — DEPOIMENTOS
===================================== */

.otica-testimonials-section {

    position: relative;

    padding: 120px 40px;

    overflow: hidden;

    background-color: #071d58;

    background-image:
        url("../images/background-depoimentos-otica.jpg");

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;

}


/* OVERLAY PRINCIPAL */

.otica-testimonials-overlay {

    position: absolute;

    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            rgba(4, 20, 65, 0.98) 0%,
            rgba(7, 31, 94, 0.95) 45%,
            rgba(9, 42, 125, 0.84) 100%
        );

}


/* EFEITO DE PROFUNDIDADE */

.otica-testimonials-section::before {

    content: "";

    position: absolute;

    z-index: 2;

    width: 580px;

    height: 580px;

    top: -370px;

    right: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(76, 124, 255, 0.33),
            transparent 68%
        );

    pointer-events: none;

}


.otica-testimonials-section::after {

    content: "";

    position: absolute;

    z-index: 2;

    width: 430px;

    height: 430px;

    left: -270px;

    bottom: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(45, 91, 221, 0.28),
            transparent 68%
        );

    pointer-events: none;

}


/* PADRÃO DECORATIVO */

.otica-testimonials-pattern {

    position: absolute;

    z-index: 2;

    inset: 0;

    opacity: 0.05;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.5) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.5) 1px,
            transparent 1px
        );

    background-size: 52px 52px;

    pointer-events: none;

}


/* =====================================
CONTAINER
===================================== */

.otica-testimonials-container {

    position: relative;

    z-index: 4;

    width: min(1280px, 100%);

    margin: 0 auto;

}


/* =====================================
CABEÇALHO
===================================== */

.otica-testimonials-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 58px;

}


.otica-testimonials-heading {

    max-width: 760px;

}


.otica-testimonials-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #9db8ff;

    font-family: "Montserrat", sans-serif;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;

}


.otica-testimonials-tag i {

    font-size: 16px;

}


.otica-testimonials-heading h2 {

    max-width: 720px;

    margin: 0;

    color: #ffffff;

    font-family: "Montserrat", sans-serif;

    font-size: clamp(39px, 4.4vw, 62px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -0.045em;

}


.otica-testimonials-heading h2 strong {

    color: #8eaeff;

    font-weight: 800;

}


.otica-testimonials-heading p {

    max-width: 670px;

    margin: 23px 0 0;

    color: rgba(255, 255, 255, 0.7);

    font-family: "Poppins", sans-serif;

    font-size: 16px;

    line-height: 1.8;

}


/* =====================================
BOTÕES DE AÇÃO
===================================== */

.otica-testimonials-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}


.otica-testimonials-control {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.22);

    border-radius: 14px;

    color: #ffffff;

    cursor: pointer;

    background: rgba(255, 255, 255, 0.09);

    backdrop-filter: blur(12px);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        opacity 0.3s ease;

}


.otica-testimonials-control i {

    font-size: 20px;

}


.otica-testimonials-control:hover {

    transform: translateY(-4px);

    border-color: rgba(255, 255, 255, 0.5);

    background: #ffffff;

    color: #0f35a6;

}


.otica-testimonials-control:disabled {

    opacity: 0.38;

    cursor: not-allowed;

    transform: none;

}


/* =====================================
ÁREA DO CARROSSEL
===================================== */

.otica-testimonials-carousel {

    width: 100%;

    overflow: hidden;

    padding:
        8px 3px
        30px;

}


.otica-testimonials-track {

    display: flex;

    align-items: stretch;

    gap: 24px;

    transition:
        transform 0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    will-change: transform;

}


/* =====================================
CARD DE DEPOIMENTO
===================================== */

.otica-testimonial-card {

    position: relative;

    display: flex;

    flex:
        0 0
        calc(
            (100% - 48px) / 3
        );

    min-width: 0;

    min-height: 390px;

    flex-direction: column;

    justify-content: space-between;

    padding: 30px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.17);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.07)
        );

    box-shadow:
        0 25px 60px rgba(0, 8, 37, 0.2);

    backdrop-filter: blur(18px);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;

}


.otica-testimonial-card::before {

    content: "";

    position: absolute;

    width: 155px;

    height: 155px;

    right: -95px;

    bottom: -95px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    transition:
        transform 0.4s ease;

}


.otica-testimonial-card:hover {

    transform: translateY(-9px);

    border-color: rgba(255, 255, 255, 0.34);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.1)
        );

    box-shadow:
        0 34px 70px rgba(0, 8, 37, 0.3);

}


.otica-testimonial-card:hover::before {

    transform: scale(1.25);

}


/* TOPO DO CARD */

.otica-testimonial-card-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.otica-testimonial-quote {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 14px;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.1);

}


.otica-testimonial-quote i {

    font-size: 25px;

}


.otica-testimonial-stars {

    display: flex;

    align-items: center;

    gap: 4px;

    color: #ffd66b;

}


.otica-testimonial-stars i {

    font-size: 13px;

}


/* TEXTO DO DEPOIMENTO */

.otica-testimonial-card blockquote {

    position: relative;

    z-index: 2;

    flex: 1;

    margin:
        30px 0
        32px;

    color: rgba(255, 255, 255, 0.89);

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-style: normal;

    font-weight: 400;

    line-height: 1.85;

}


/* CLIENTE */

.otica-testimonial-client {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 15px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.13);

}


.otica-testimonial-photo {

    width: 58px;

    height: 58px;

    flex-shrink: 0;

    padding: 3px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.1);

}


.otica-testimonial-photo img {

    display: block;

    width: 100%;

    height: 100%;

    border-radius: 12px;

    object-fit: cover;

    object-position: center;

}


.otica-testimonial-client-info {

    display: flex;

    min-width: 0;

    flex-direction: column;

    gap: 3px;

}


.otica-testimonial-client-info strong {

    color: #ffffff;

    font-family: "Montserrat", sans-serif;

    font-size: 14px;

    font-weight: 800;

}


.otica-testimonial-client-info span {

    overflow: hidden;

    color: #a9c0ff;

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    white-space: nowrap;

    text-overflow: ellipsis;

}


.otica-testimonial-client-info small {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 3px;

    color: rgba(255, 255, 255, 0.54);

    font-family: "Poppins", sans-serif;

    font-size: 10px;

}


/* =====================================
RODAPÉ DA SEÇÃO
===================================== */

.otica-testimonials-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    margin-top: 8px;

}


/* INDICADORES */

.otica-testimonials-dots {

    display: flex;

    align-items: center;

    gap: 8px;

}


.otica-testimonials-dot {

    width: 9px;

    height: 9px;

    padding: 0;

    border: none;

    border-radius: 20px;

    cursor: pointer;

    background: rgba(255, 255, 255, 0.3);

    transition:
        width 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;

}


.otica-testimonials-dot:hover {

    transform: scale(1.2);

    background: rgba(255, 255, 255, 0.65);

}


.otica-testimonials-dot.active {

    width: 32px;

    background: #ffffff;

}


/* BLOCO DE CONFIANÇA */

.otica-testimonials-trust {

    display: flex;

    align-items: center;

    gap: 15px;

}


.otica-testimonials-avatars {

    display: flex;

    align-items: center;

}


.otica-testimonials-avatars span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 39px;

    height: 39px;

    margin-left: -10px;

    overflow: hidden;

    border: 3px solid #09296f;

    border-radius: 50%;

    background: #ffffff;

}


.otica-testimonials-avatars span:first-child {

    margin-left: 0;

}


.otica-testimonials-avatars img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.otica-testimonials-avatars
.otica-testimonials-avatar-more {

    color: #0f35a6;

    font-family: "Montserrat", sans-serif;

    font-size: 13px;

    font-weight: 800;

    background: #ffffff;

}


.otica-testimonials-trust p {

    max-width: 280px;

    margin: 0;

    color: rgba(255, 255, 255, 0.61);

    font-family: "Poppins", sans-serif;

    font-size: 11px;

    line-height: 1.55;

}


.otica-testimonials-trust p strong {

    display: block;

    color: #ffffff;

    font-family: "Montserrat", sans-serif;

    font-size: 12px;

    font-weight: 800;

}

/* =====================================
LOGO NO TOPO DA SEÇÃO
===================================== */

.otica-growth-top-logo{

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    margin-top: -30px;      /* sobe a logo */
    margin-bottom: 35px;

}


.otica-growth-top-logo img{

    width: 205px;           /* tamanho da logo */
    height: auto;
    display: block;

}
.otica-growth-top-logo2 {

     display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    margin-top: -80px;      /* sobe a logo */
    margin-bottom: 35px;

}

.logo2 {

 width: 205px;           /* tamanho da logo */
    height: auto;
    display: block;
}

.otica-growth-top-logo3 {

     display: flex;

    justify-content: start;

    align-items: start;

    width: 100%;

    margin-top: -30px;      /* sobe a logo */
    margin-bottom: 35px;
    margin-left:450px; /* ajuste este valor */

}

.logo3 {

 width: 205px;           /* tamanho da logo */
    height: auto;
    display: block;
}


/* =====================================
CTA FINAL PREMIUM HORIZONTAL
===================================== */

.receita-final-cta{

    position:relative;

    overflow:hidden;

    padding:75px 0;

    background-image:url("../images/sugestao2.png");
}

.receita-final-container{

    position:relative;

    z-index:5;

    width:min(1320px,calc(100% - 80px));

    margin:0 auto;

}

.receita-final-card{

    position:relative;

    display:grid;

    grid-template-columns:minmax(0,1.55fr) minmax(320px,.7fr);

    align-items:center;

    gap:65px;

    overflow:hidden;

    padding:48px 58px;

    border:1px solid rgba(255,255,255,.78);

    border-radius:30px;

    background:#ffffffd9;
    box-shadow:
        0 38px 85px rgba(0,11,45,.30),
        inset 0 1px 0 rgba(255,255,255,.95);

}

.receita-final-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:
        linear-gradient(
            90deg,
            #0f35a6,
            #3974ef,
            #76a8ff,
            #3974ef,
            #0f35a6
        );

}

.receita-final-card::after{

    content:"";

    position:absolute;

    top:-160px;

    right:-120px;

    width:360px;

    height:360px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(47,107,226,.12),
            transparent 68%
        );

    pointer-events:none;

}

.receita-final-content{

    position:relative;

    z-index:3;

    max-width:770px;

    text-align:left;

}

.receita-final-logo{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    margin-bottom:16px;

}

.receita-final-logo img{

    display:block;

    width:205px;

    max-width:100%;

    height:auto;

    transform:translateX(500px);

}

.receita-final-eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-bottom:15px;

    padding:8px 14px;

    border:1px solid rgba(15,53,166,.11);

    border-radius:999px;

    background:#edf3ff;

    color:#0f35a6;

    font-family:"Montserrat",sans-serif;

    font-size:10px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.receita-final-content h2{

    max-width:750px;

    margin:0;

    color:#142142;

    font-family:"Montserrat",sans-serif;

    font-size:clamp(32px,3.1vw,46px);

    font-weight:750;

    line-height:1.08;

    letter-spacing:-.038em;

}

.receita-final-description{

    max-width:730px;

    margin:19px 0 0;

    color:#66738b;

    font-family:"Poppins",sans-serif;

    font-size:15px;

    line-height:1.75;

}

.receita-final-features{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    justify-content:flex-start;

    gap:12px 23px;

    margin-top:24px;

}

.receita-final-features span{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#35435f;

    font-family:"Poppins",sans-serif;

    font-size:12px;

    font-weight:600;

}

.receita-final-features i{

    color:#2367d9;

    font-size:15px;

}

.receita-final-side{

    position:relative;

    z-index:3;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    justify-content:center;

    padding-left:42px;

    border-left:1px solid rgba(15,53,166,.10);

}

.receita-final-trust{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:24px;

    margin-bottom:28px;

}

.receita-final-trust-item{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.receita-final-trust-item strong{

    color:#0f35a6;

    font-family:"Montserrat",sans-serif;

    font-size:25px;

    font-weight:800;

    line-height:1;

}

.receita-final-trust-item span{

    margin-top:6px;

    color:#7e899e;

    font-family:"Poppins",sans-serif;

    font-size:10px;

    font-weight:600;

    letter-spacing:.05em;

    text-transform:uppercase;

}

.receita-final-trust-line{

    width:1px;

    height:48px;

    background:rgba(15,53,166,.13);

}

.receita-final-button{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    width:100%;

    min-height:60px;

    padding:8px 9px 8px 23px;

    border:1px solid rgba(255,255,255,.22);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            #0f35a6 0%,
            #2863dc 58%,
            #397cf4 100%
        );

    color:#ffffff;

    text-decoration:none;

    font-family:"Montserrat",sans-serif;

    font-size:13px;

    font-weight:700;

    box-shadow:
        0 17px 34px rgba(15,53,166,.27),
        inset 0 1px 0 rgba(255,255,255,.22);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}

.receita-final-button:hover{

    color:#ffffff;

    transform:translateY(-4px);

    background:
        linear-gradient(
            135deg,
            #1647c2 0%,
            #3472eb 58%,
            #4b8cff 100%
        );

    box-shadow:
        0 22px 42px rgba(15,53,166,.34),
        inset 0 1px 0 rgba(255,255,255,.28);

}

.receita-final-button-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:44px;

    height:44px;

    border-radius:11px;

    background:rgba(255,255,255,.16);

    font-size:16px;

    transition:
        transform .35s ease,
        background .35s ease;

}

.receita-final-button:hover .receita-final-button-icon{

    transform:translateX(3px);

    background:rgba(255,255,255,.24);

}

.receita-final-note{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    margin:13px 0 0;

    color:#7b879b;

    font-family:"Poppins",sans-serif;

    font-size:10px;

    line-height:1.5;

    text-align:center;

}

.receita-final-note i{

    color:#2c6ddd;

    font-size:13px;

}

.receita-final-card-glow{

    position:absolute;

    right:-40px;

    bottom:-170px;

    width:310px;

    height:310px;

    border-radius:50%;

    background:rgba(47,107,226,.15);

    filter:blur(50px);

    pointer-events:none;

}

.receita-final-grid{

    position:absolute;

    inset:0;

    opacity:.17;

    background-image:
        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.045) 1px,
            transparent 1px
        );

    background-size:55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 20%,
            #000 80%,
            transparent
        );

    pointer-events:none;

}

.receita-final-decoration{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.receita-final-decoration-left{

    top:-230px;

    left:-210px;

    width:430px;

    height:430px;

    border:1px solid rgba(255,255,255,.07);

    box-shadow:
        0 0 0 55px rgba(255,255,255,.023),
        0 0 0 110px rgba(255,255,255,.015);

}

.receita-final-decoration-right{

    right:-150px;

    bottom:-190px;

    width:350px;

    height:350px;

    border:1px solid rgba(255,255,255,.07);

    box-shadow:
        0 0 0 48px rgba(255,255,255,.023),
        0 0 0 96px rgba(255,255,255,.015);

}

/* =====================================
RESPONSIVIDADE EXCLUSIVA PARA DESKTOP
Notebooks, monitores padrão e telas grandes
===================================== */

/* NOTBOOKS E TELAS COMPACTAS — 1024px a 1366px */
@media screen and (min-width: 1024px) and (max-width: 1366px) {

    .otica-hero {
        min-height: 720px;
        padding-top: 76px;
    }

    .otica-hero-container,
    .otica-growth-container,
    .receita-final-container {
        width: min(1160px, calc(100% - 56px));
    }

    .otica-hero-content {
        width: min(610px, 55%);
        padding: 60px 0 90px;
    }

    .otica-hero-title {
        font-size: 38px;
    }

    .otica-hero-description {
        max-width: 560px;
        font-size: 16px;
    }

    .otica-growth-section {
        padding: 85px 0;
    }

    .otica-growth-header {
        gap: 42px;
        margin-bottom: 56px;
    }

    .otica-growth-heading h2,
    .otica-testimonials-heading h2 {
        font-size: 46px;
    }

    .otica-growth-grid {
        grid-template-columns: minmax(0, .92fr) minmax(400px, 1.08fr);
        gap: 46px;
    }

    .otica-growth-dashboard {
        min-height: 590px;
    }

    .otica-growth-dashboard-card {
        width: min(100%, 570px);
        transform: translateY(-70px);
    }

    .otica-growth-dashboard-image,
    .otica-growth-system-image {
        min-height: 360px;
    }

    .otica-testimonials-section {
        padding: 90px 32px;
    }

    .otica-testimonial-card {
        min-height: 365px;
        padding: 25px;
    }

    .receita-final-cta {
        padding: 62px 0;
    }

    .receita-final-card {
        gap: 42px;
        padding: 42px 46px;
    }

    .receita-final-logo img {
        transform: translateX(390px);
    }
}

/* MONITORES DESKTOP PADRÃO — 1367px a 1599px */
@media screen and (min-width: 1367px) and (max-width: 1599px) {

    .otica-hero-container,
    .otica-growth-container,
    .receita-final-container {
        width: min(1280px, calc(100% - 72px));
    }

    .otica-hero {
        min-height: 820px;
    }

    .otica-growth-dashboard-card {
        width: min(100%, 620px);
    }

    .otica-testimonials-container {
        width: min(1280px, 100%);
    }
}

/* MONITORES GRANDES — 1600px a 1919px */
@media screen and (min-width: 1600px) and (max-width: 1919px) {

    .otica-hero-container,
    .otica-growth-container,
    .receita-final-container {
        width: min(1400px, calc(100% - 100px));
    }

    .otica-hero {
        min-height: 900px;
    }

    .otica-hero-content {
        width: min(700px, 52%);
    }

    .otica-hero-title {
        font-size: 44px;
    }

    .otica-growth-grid {
        gap: 90px;
    }

    .otica-growth-dashboard-card {
        width: min(100%, 690px);
    }

    .otica-testimonials-container {
        width: min(1400px, 100%);
    }

    .receita-final-card {
        padding: 54px 64px;
    }
}

/* MONITORES ULTRAWIDE E 2K/4K — 1920px OU MAIS */
@media screen and (min-width: 1920px) {

    .otica-hero-container,
    .otica-growth-container,
    .receita-final-container {
        width: min(1540px, calc(100% - 140px));
    }

    .otica-hero {
        min-height: 980px;
    }

    .otica-hero-content {
        width: min(760px, 50%);
        padding: 100px 0 130px;
    }

    .otica-hero-title {
        max-width: 730px;
        font-size: 50px;
    }

    .otica-hero-description {
        max-width: 680px;
        font-size: 19px;
    }

    .otica-growth-section {
        padding: 105px 0;
    }

    .otica-growth-heading h2,
    .otica-testimonials-heading h2 {
        font-size: 64px;
    }

    .otica-growth-grid {
        gap: 110px;
    }

    .otica-growth-dashboard-card {
        width: min(100%, 740px);
    }

    .otica-growth-dashboard-image,
    .otica-growth-system-image {
        min-height: 470px;
    }

    .otica-testimonials-section {
        padding: 135px 60px;
    }

    .otica-testimonials-container {
        width: min(1540px, 100%);
    }

    .otica-testimonial-card {
        min-height: 420px;
        padding: 34px;
    }

    .receita-final-cta {
        padding: 90px 0;
    }

    .receita-final-card {
        gap: 78px;
        padding: 62px 74px;
    }
}