/* Ajustes de fidelidade — image1 (solucao), image2 (desafio), image3 (IA).
   Este arquivo deve ser carregado depois de landing.css/reference-screens.css. */

/* As superficies continuam orientadas pelos tokens do tema. */
:is(.problem, .solution, .ai-section) {
  --fidelity-panel: color-mix(in srgb, var(--surface) 92%, transparent);
  --fidelity-panel-border: color-mix(in srgb, var(--primary) 14%, var(--border));
  --fidelity-panel-shadow: 0 18px 48px color-mix(in srgb, var(--primary-deep) 11%, transparent);
  --fidelity-panel-shadow-hover: 0 28px 66px color-mix(in srgb, var(--primary-deep) 19%, transparent);
}

/* Evita que o reveal posterior elimine a transicao de borda/sombra no hover. */
.js :is(.problem, .ai-section) .pain-card[data-reveal] {
  transition:
    opacity .65s cubic-bezier(.16, 1, .3, 1),
    transform .65s cubic-bezier(.16, 1, .3, 1),
    border-color .28s ease,
    box-shadow .32s ease,
    background-color .28s ease;
  transition-delay:
    var(--reveal-delay, 0ms),
    var(--reveal-delay, 0ms),
    0ms,
    0ms,
    0ms;
}

@media (min-width: 1100px) {
  /* image2 — margens proximas de 68px em uma tela de 1536px. */
  .problem > .container {
    width: min(calc(100% - 136px), 1400px);
    max-width: none;
    padding-inline: 0;
  }

  .problem {
    min-height: 948px;
    padding: 48px 0 78px;
    background:
      radial-gradient(38rem 29rem at 77% 28%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 70%),
      transparent;
  }

  .problem__layout {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: clamp(44px, 4vw, 66px);
    align-items: start;
  }

  .problem__copy { padding-top: 17px; }

  .problem__copy h2 {
    max-width: 630px;
    margin-top: 28px;
    font-size: clamp(56px, 4.15vw, 64px);
    line-height: 1.08;
    letter-spacing: -.055em;
  }

  .problem__lead {
    max-width: 600px;
    margin-top: 30px;
    font-size: 18px;
    line-height: 1.78;
  }

  .problem__visual {
    align-self: start;
    margin-top: -2px;
  }

  .problem__photo {
    display: block;
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    object-position: center top;
    border-radius: 0;
    filter: drop-shadow(0 26px 36px color-mix(in srgb, var(--primary-deep) 16%, transparent));
  }

  .problem .pain-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 0;
  }

  .problem .pain-card {
    min-height: 354px;
    padding: 35px;
    border: 1px solid var(--fidelity-panel-border);
    border-radius: 20px;
    background: var(--fidelity-panel);
    box-shadow: var(--fidelity-panel-shadow);
  }

  .problem .pain-card__number {
    top: 35px;
    right: 35px;
    font-size: 20px;
    opacity: .8;
  }

  .problem .icon-disc {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }

  .problem .icon-disc svg { width: 38px; height: 38px; }

  .problem .pain-card h3 {
    margin-top: 40px;
    font-size: 27px;
    line-height: 1.16;
  }

  .problem .pain-card p {
    max-width: 360px;
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.68;
  }

  .problem .pain-card::after {
    left: 35px;
    bottom: 35px;
    width: 62px;
    height: 3px;
  }

  /* image1 — composicao assimetrica, com foto cortada no rodape. */
  .solution > .container {
    width: min(calc(100% - 176px), 1336px);
    max-width: none;
    padding-inline: 0;
  }

  .solution {
    min-height: 856px;
    padding: 72px 0 0;
    background:
      radial-gradient(43rem 34rem at 4% 100%, color-mix(in srgb, var(--secondary) 20%, transparent), transparent 70%),
      transparent;
  }

  .solution__layout {
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: clamp(58px, 5vw, 88px);
    align-items: start;
  }

  .solution__intro { min-width: 0; }

  .solution__intro h2 {
    max-width: 600px;
    margin-top: 26px;
    font-size: clamp(61px, 4.25vw, 72px);
    line-height: 1.02;
    letter-spacing: -.06em;
  }

  .solution__intro > p:not(.eyebrow) {
    max-width: 520px;
    margin-top: 24px;
    font-size: 18px;
    line-height: 1.68;
  }

  .solution__intro .text-action {
    margin-top: 31px;
    font-size: 16px;
  }

  .solution__photo {
    width: min(660px, 116%);
    aspect-ratio: 1.19;
    margin-top: 24px;
    margin-left: -88px;
    border-radius: 50% 50% 46% 54% / 46% 44% 56% 54%;
    background-size: cover, cover;
    background-position: center, center;
    box-shadow: 0 28px 60px color-mix(in srgb, var(--primary-deep) 15%, transparent);
  }

  .solution-steps {
    gap: 30px;
    padding-top: 31px;
  }

  .solution-steps::before {
    left: 41px;
    top: 75px;
    bottom: 75px;
  }

  .solution-step {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 24px;
  }

  .solution-step > .solution-step__num {
    width: 82px;
    height: 82px;
    border: 7px solid color-mix(in srgb, var(--surface) 72%, transparent);
    outline: 1px solid var(--border);
    font-size: 22px;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-deep) 10%, transparent);
  }

  .solution-step__card {
    min-height: 158px;
    grid-template-columns: 132px minmax(0, 1fr) 52px;
    gap: 22px;
    padding: 20px 30px 20px 22px;
    border: 1px solid var(--fidelity-panel-border);
    border-radius: 22px;
    background: var(--fidelity-panel);
    box-shadow: var(--fidelity-panel-shadow);
  }

  .solution-step__icon {
    width: 126px;
    height: 116px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
  }

  .solution-step__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .solution-step__card h3 {
    font-size: 24px;
    line-height: 1.15;
  }

  .solution-step__card p {
    max-width: 330px;
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.55;
  }

  .solution-step__arrow {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  /* image3 — cards horizontais reais em grade 2x2. */
  .ai-section > .container {
    width: min(calc(100% - 156px), 1442px);
    max-width: none;
    padding-inline: 0;
  }

  .ai-section {
    min-height: 904px;
    padding: 46px 0 24px;
    background:
      radial-gradient(35rem 23rem at 82% 8%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 72%),
      transparent;
  }

  .ai-section .section-heading--split {
    display: block;
    max-width: 910px;
  }

  .ai-section .section-heading--split > div { max-width: 910px; }

  .ai-section .section-heading h2 {
    max-width: 900px;
    margin-top: 24px;
    font-size: clamp(55px, 4vw, 64px);
    line-height: 1.04;
    letter-spacing: -.055em;
  }

  .ai-section .section-heading--split > p {
    max-width: 760px;
    margin-top: 24px;
    font-size: 18px;
    line-height: 1.7;
  }

  .ai-section .section-heading h2::after {
    width: 52px;
    margin-top: 22px;
  }

  .ai-section .pain-points--quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 32px;
    margin-top: 38px;
  }

  .ai-section .pain-card {
    display: grid;
    min-height: 248px;
    grid-template-columns: 112px minmax(0, 1fr) 58px;
    grid-template-rows: 31px auto 1fr;
    column-gap: 24px;
    align-items: start;
    padding: 30px;
    border: 1px solid var(--fidelity-panel-border);
    border-radius: 18px;
    background: var(--fidelity-panel);
    box-shadow: var(--fidelity-panel-shadow);
  }

  .ai-section .pain-card:first-child {
    border-left: 6px solid var(--primary);
    padding-left: 25px;
  }

  .ai-section .pain-card .icon-disc {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 96px;
    height: 96px;
    margin-top: 3px;
    border-radius: 18px;
  }

  .ai-section .pain-card .icon-disc svg { width: 47px; height: 47px; }

  .ai-section .pain-card__number {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 21px;
    line-height: 1;
    opacity: .92;
  }

  .ai-section .pain-card h3 {
    grid-column: 2;
    grid-row: 2;
    max-width: 420px;
    margin: 4px 0 0;
    font-size: 25px;
    line-height: 1.12;
    letter-spacing: -.03em;
  }

  .ai-section .pain-card p {
    grid-column: 2;
    grid-row: 3;
    max-width: 440px;
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.48;
  }

  .ai-section .pain-card::after {
    content: "\2192";
    position: static;
    grid-column: 3;
    grid-row: 1 / 4;
    align-self: center;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    color: var(--primary);
    font-size: 31px;
    opacity: 1;
    transition: transform .32s cubic-bezier(.16, 1, .3, 1), background-color .25s ease, color .25s ease;
  }

  .ai-section .pain-card:hover::after {
    width: 54px;
    transform: translateX(5px);
    background: var(--primary);
    color: #fff;
  }

  .ai-section .ai-proof {
    min-height: 64px;
    margin-top: 26px;
    padding: 13px 30px;
    border-radius: 18px;
    font-size: 16px;
  }
}

/* Calibração proporcional da image1 em viewports desktop menores que a referência. */
@media (min-width: 1100px) {
  .solution > .container {
    width: 80vw;
    max-width: 1336px;
  }

  .solution__layout {
    grid-template-columns: clamp(500px, 32.6vw, 550px) clamp(606px, 41vw, 691px);
    justify-content: space-between;
    gap: 0;
  }

  .solution__intro { padding-top: 32px; }
  .solution__intro h2 { max-width: 440px; }

  .solution__photo {
    width: min(660px, 43vw);
    aspect-ratio: 1.48;
    margin-top: 8px;
    margin-left: -11vw;
    background-position: center 38%;
  }

  .solution-steps { padding-top: 80px; }

  .solution-steps::before {
    left: 0;
    width: 82px;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 100' preserveAspectRatio='none'%3E%3Cpath d='M41 0C2 14 2 36 41 50s39 36 0 50' fill='none' stroke='%239b7cf4' stroke-opacity='.55' stroke-width='1.2' stroke-dasharray='3 3'/%3E%3Ccircle cx='18' cy='25' r='2.2' fill='%235b35f5'/%3E%3Ccircle cx='64' cy='75' r='2.2' fill='%235b35f5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }

  .ai-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 28px;
    right: 5vw;
    width: min(38vw, 570px);
    height: 285px;
    pointer-events: none;
    opacity: .38;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 570 285'%3E%3Cg fill='%23ded5ff'%3E%3Cpath d='M130 190h44v-72h-44zM185 190h54V82h-54zM250 190h42v-53h-42zM303 190h67V48h-67zM382 190h48v-92h-48z'/%3E%3Ccircle cx='104' cy='172' r='24'/%3E%3Ccircle cx='455' cy='165' r='28'/%3E%3C/g%3E%3Cpath d='M32 246C153 166 271 258 526 198M58 270C190 205 320 282 550 222' fill='none' stroke='%238b6fff' stroke-width='16' stroke-linecap='round' opacity='.42'/%3E%3Cg fill='%23fff' stroke='%236238f7' stroke-width='3'%3E%3Crect x='42' y='42' width='76' height='76' rx='18'/%3E%3Crect x='235' y='92' width='76' height='76' rx='18'/%3E%3Crect x='438' y='62' width='76' height='76' rx='18'/%3E%3C/g%3E%3Cpath d='M68 79l12 12 22-27M255 130h12l8-20 12 38 8-18h8M461 100h28m-12-12 12 12-12 12' fill='none' stroke='%235b35f5' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

@media (min-width: 761px) and (max-width: 1099px) {
  :is(.problem, .solution, .ai-section) > .container {
    width: calc(100% - 64px);
    max-width: none;
    padding-inline: 0;
  }

  .problem .pain-card { min-height: 270px; }
  .solution__layout { gap: 42px; }
  .ai-section .pain-card { min-height: 250px; }
}

@media (hover: hover) and (pointer: fine) {
  :is(.problem, .ai-section) .pain-card.is-visible:hover {
    transform: translateY(-8px) scale(1.012);
    border-color: color-mix(in srgb, var(--primary) 48%, transparent);
    box-shadow: var(--fidelity-panel-shadow-hover);
  }

  .solution-step:hover .solution-step__card {
    transform: translateY(-7px) scale(1.008);
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
    box-shadow: var(--fidelity-panel-shadow-hover);
  }

  .solution-step:hover .solution-step__num {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--surface));
    color: var(--primary);
  }
}

@media (max-width: 760px) {
  .ai-section .pain-card::after { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.problem, .solution, .ai-section) *,
  :is(.problem, .solution, .ai-section) *::before,
  :is(.problem, .solution, .ai-section) *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}