﻿/* Existing About panel, with a distinct icon and finite animation per indicator. */
#sobreSection .home-about-tabs{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
#sobreSection .aboutSelects{height:auto;min-height:38px;margin:0;padding:6px 14px 6px 8px;border:1px solid transparent;gap:10px;text-align:left;font:inherit;font-size:14px;color:#242424;transition:background .2s,transform .2s,box-shadow .2s}
#sobreSection .home-about-icon{display:block;width:24px;height:24px;flex:none;color:#c91e1f}
#sobreSection .aboutSelects[aria-selected=true]{background:#fff;box-shadow:0 4px 16px #570b0b26;transform:translateX(4px)}
#sobreSection .aboutSelects:hover{transform:translateX(4px)}
#sobreSection :is(.aboutSelects,.aboutSelectsPage):focus-visible{outline:2px solid #fff;outline-offset:4px}
#sobreSection .aboutSelectsPage[hidden]{display:none!important}
#sobreSection .aboutSelectsPage{min-width:0;min-height:340px}
#sobreSection .aboutSelectsPage>div:not(.home-about-feedback-card){padding-top:0;padding-bottom:0}
#sobreSection .home-about-demonstration{display:flex;justify-content:center;align-items:center;width:76px;height:76px;margin:0 auto 16px;border:1px solid #ffffff50;border-radius:50%;background:#ffffff12;box-shadow:inset 0 1px 0 #ffffff24}
#sobreSection .home-about-demonstration .home-about-icon{width:42px;height:42px;color:#fff;overflow:visible}
#sobreSection :is(#npsResult,#healthResult,#clientResults){font-variant-numeric:tabular-nums;font-size:clamp(54px,6.5vw,100px);line-height:1.15;white-space:nowrap}
#sobreSection .home-about-entering{animation:home-about-reveal .55s ease-out both}
#sobreSection .home-about-entering [data-about-kind="1"] svg{animation:home-about-smile .85s ease-out both}
#sobreSection .home-about-entering [data-about-kind="1"] svg path{stroke-dasharray:35;stroke-dashoffset:35;animation:home-about-draw 1s .2s ease-out forwards}
#sobreSection .home-about-entering [data-about-kind="2"] svg{animation:home-about-heartbeat .65s ease-in-out 2}
#sobreSection .home-about-entering [data-about-kind="3"] svg{animation:home-about-building .8s ease-out both}
#sobreSection .home-about-entering [data-about-kind="3"] svg path{stroke-dasharray:140;stroke-dashoffset:140;animation:home-about-draw 1.2s ease-out forwards}
#sobreSection #usersFeedback{height:auto;max-height:460px;min-height:340px;overflow:auto;align-content:start;padding:6px;scrollbar-width:none;-ms-overflow-style:none}
#sobreSection .home-about-feedback-card{position:relative;height:auto;min-height:170px;overflow:hidden;border:1px solid #ffffff70}
#sobreSection .home-about-feedback-card::after{content:'\201c';position:absolute;right:12px;top:0;color:#c91e1f20;font-size:76px;line-height:1;pointer-events:none}
#sobreSection .home-about-feedback-card img{border-radius:50%;object-fit:cover}
#sobreSection .home-about-feedback-card>div:last-child{font-size:13px;line-height:1.5}
#sobreSection .home-about-entering .home-about-feedback-card{animation:home-about-reveal .5s ease-out both;animation-delay:calc(var(--card-index,0)*.12s)}
@keyframes home-about-reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes home-about-smile{0%{transform:scale(.75) rotate(-12deg)}65%{transform:scale(1.08) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes home-about-draw{to{stroke-dashoffset:0}}
@keyframes home-about-heartbeat{0%,100%{transform:scale(1)}35%{transform:scale(1.13)}60%{transform:scale(1.02)}}
@keyframes home-about-building{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:767px){#sobreSection .home-about-tabs{gap:8px}#sobreSection .aboutSelects{font-size:13px;max-width:100%}#sobreSection .aboutSelectsPage{min-height:300px}#sobreSection .home-about-demonstration{width:64px;height:64px;margin-bottom:12px}#sobreSection .home-about-demonstration svg{width:36px;height:36px}#sobreSection #usersFeedback{max-height:400px}#sobreSection .home-about-feedback-card{padding:20px}}
@media(prefers-reduced-motion:reduce){#sobreSection .aboutSelects,#sobreSection .aboutSelectsPage,#sobreSection .home-about-icon,#sobreSection .home-about-icon path,#sobreSection .home-about-feedback-card{animation:none!important;transition:none!important;transform:none!important;stroke-dashoffset:0!important}}
@media(max-width:767px){#sobreSection :is(#npsResult,#healthResult,#clientResults){font-size:clamp(40px,14vw,64px)}}

#sobreSection #usersFeedback::-webkit-scrollbar{display:none;width:0;height:0}

/* A more expressive entrance, then gentle motion while the result stays visible. */
#sobreSection .home-about-entering{animation:home-about-result-in .75s cubic-bezier(.2,.7,.3,1) both}
#sobreSection .home-about-demonstration{position:relative}
#sobreSection .home-about-demonstration::after{content:"";position:absolute;inset:-1px;border:1px solid #ffffff60;border-radius:50%;pointer-events:none;animation:home-about-ring 3.6s 1s ease-out infinite}
#sobreSection .home-about-entering [data-about-kind="1"] svg{animation:home-about-smile .85s ease-out both,home-about-sway 4s 1s ease-in-out infinite}
#sobreSection .home-about-entering [data-about-kind="2"] svg{animation:home-about-heartbeat .65s ease-in-out 2,home-about-heart-idle 3.2s 1.5s ease-in-out infinite}
#sobreSection .home-about-entering [data-about-kind="3"] svg{animation:home-about-building .8s ease-out both,home-about-float 4s 1s ease-in-out infinite}
#sobreSection #home-about-panel-1 .rounded-full svg{animation:home-about-star 3s ease-in-out infinite;transform-origin:center}
#sobreSection #home-about-panel-1 .rounded-full svg:nth-child(2){animation-delay:.15s}
#sobreSection #home-about-panel-1 .rounded-full svg:nth-child(3){animation-delay:.3s}
#sobreSection #home-about-panel-1 .rounded-full svg:nth-child(4){animation-delay:.45s}
#sobreSection #home-about-panel-1 .rounded-full svg:nth-child(5){animation-delay:.6s}
#sobreSection .aboutSelects[aria-selected=true] .home-about-icon{animation:home-about-tab-icon 4s ease-in-out infinite}
#sobreSection .home-about-feedback-card::after{animation:home-about-quote 4s ease-in-out infinite;animation-delay:calc(var(--card-index,0)*.35s)}
#sobreSection .home-about-feedback-card img{animation:home-about-avatar 4s ease-in-out infinite;animation-delay:calc(var(--card-index,0)*.35s)}
#sobreSection:not(.home-about-visible) *,#sobreSection:not(.home-about-visible) *::before,#sobreSection:not(.home-about-visible) *::after{animation-play-state:paused!important}
@keyframes home-about-result-in{0%{opacity:0;transform:translateY(22px) scale(.96)}70%{opacity:1;transform:translateY(-3px) scale(1.01)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes home-about-ring{0%{opacity:.6;transform:scale(1)}65%,100%{opacity:0;transform:scale(1.32)}}
@keyframes home-about-sway{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-7deg) scale(1.05)}60%{transform:rotate(5deg) scale(1.02)}}
@keyframes home-about-heart-idle{0%,35%,100%{transform:scale(1)}12%{transform:scale(1.16)}23%{transform:scale(1.04)}28%{transform:scale(1.1)}}
@keyframes home-about-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes home-about-star{0%,55%,100%{transform:scale(1);opacity:1}25%{transform:scale(1.2);opacity:.75}}
@keyframes home-about-tab-icon{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-3px)}90%{transform:translateY(1px)}}
@keyframes home-about-quote{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(5px);opacity:1}}
@keyframes home-about-avatar{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){#sobreSection *,#sobreSection *::before,#sobreSection *::after{animation:none!important;transition:none!important}}
