* {
    font-family:  -apple-system, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
body {
    margin-top: 0px;
}
body, p {
    font-size: 18px;
    line-height: 1.52947;
    font-weight: 400;
    color: #333;
    font-style: normal;
}
h1 {
    font-size: 44px;
    line-height: 1.04167;
    font-weight: 500;
    letter-spacing: .006em;
    text-align: center;
}
.box-help h1 {
    text-align: left;
}
h2 {
    font-size: 40px;
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: .008em;
}
h3 {
    font-size: 26px;
    line-height: 1.09375;
    font-weight: 600;
    letter-spacing: .011em;
}
h4 {
    font-size: 22px;
    line-height: 1.20849;
    font-weight: 500;
    letter-spacing: .015em;
}
a {
    color: #007AFF;
}
.bs-docs-masthead {
    min-height: 100vh;
}
.app-store-badge {
  display: inline-block;
  width: 200px;
  height: 66px; /* Adjust based on your image ratio */
  background-image: url('/images/App_Store_Badge_Black.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  text-indent: -9999px; /* Hide any text if needed */
}
.mac-store-badge {
  display: inline-block;
  width: 200px;
  height: 66px; /* Adjust based on your image ratio */
  background-image: url('/images/Mac_Store_Badge_Black.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  text-indent: -9999px; /* Hide any text if needed */
}
.navbar {
    padding: 0rem 1rem;
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(11.3px);
    -webkit-backdrop-filter: blur(11.3px);
}
.nav-item a {
    color: #000000;
    text-decoration: none;
    font-size:15px;
    font-weight: 300;
    white-space: nowrap;
}
.navbar .container {
    padding-left:0px;
    padding-right:0px;
}
#dropdown-language {
    --bs-btn-padding-y:0;
    color: #111;
    background: rgba(255, 255, 255, 0);
    border: 0;
    font-size: 15px;
}
.navbar-brand {
    min-height:50px;
}
.nav-link a:hover {
    color: #333;
}
.navbar-brand img {
    content:url(/images/starkode-black.png);
    margin-top:5px;
    height:28px;
    max-height:28px;
}
.bs-docs-footer {
    margin-top:6px;
    margin-bottom:16px;
}
.round-outer {
    display: inline-block;
    margin: 4px 2px 4px 2px;
}
.round-blue, .round-green, .round-back {
    background: none repeat scroll 0 0 #007AFF;
    border: 0px solid #ffffff;
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    padding: 5px 15px;
    text-transform: lowercase;
}
.round-green {
    background: none repeat scroll 0 0 #34C759;
}
.round-back {
    background: none repeat scroll 0 0 #007AFF;
    text-decoration: none;
}
.round-back:hover {
    text-decoration: none;
    color: #fff;
}
.bottom-right{
    position:absolute;
    bottom: 15;
    right: 25;
}
.link_footer {
    padding-right:15px;
    padding-left:15px;
}
.link_title {
    color:#333;
    margin-top:20px;
    text-decoration:none;
    font-size:24px;
    font-weight:700;
}
.link_subtitle{
    color:#333;
    margin-top:20px;
    text-decoration:none;
    font-size:16px;
    font-weight:300;
    margin-top: 0px;
}
.col-sm-4 img {
    margin-top: 10px;
    margin-bottom: 10px;
}
.btn-outline {
    padding: 10px 40px;
    color: #ffffff;
    font-weight: 400;
    background-color: #007AFF;
    
}
.btn-outline:active, .btn-outline:focus, .btn-outline:hover {
    color: #eee;
}
.feature_mask, .feature_mask_white {
    height: 60px;
}
.feature_mask_white {
    filter: invert(88%);
}
img.feature_mask, img.feature_mask_white {
    margin-bottom: 15px;
}
.squircle_mask {
    -webkit-mask-image: url(/images/ios7-icon.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    width: 100px;
}
img.squircle_mask {
    margin-bottom: 35px;
}
hr {
    margin-top: 50px;
    margin-bottom: 50px;
}
.lead {
    font-size: 21px;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.desktop {
    width: 90%;
}
.iphone {
    width: 100%;
    max-width: 260px;
}
.iphone {
  opacity: 1;                /* visible by default */
  visibility: visible;
  transform: none;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.iphone.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.large_img {
    max-width: 320px;
}
.intro {
    font-size: 21px;
    line-height: 1.45455;
    font-weight: 300;
    letter-spacing: .016em;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    margin-top: 10px;
}
.disclaimer {
    font-size: 12px;
    display:inline;
}
.disclaimer a {
    font-size: 12px;
    color: #999;
}
.space {
    margin-top: 30px;
}
.bs-docs-featurette {
    padding-bottom: 30px;
    padding-top: 30px;
}
.container-full {
    padding-top:110px;
    padding-bottom:110px;
    width:100%;
}
.label-primary {
    color: #000000;
}
.label-secondary {
    color: #333333;
}
.label-tertiary{
    color: #666666;
}
.rounded-box {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(11.3px);
    -webkit-backdrop-filter: blur(11.3px);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 32px;
    -moz-border-radius: 32px;
    max-width: 760px;
    margin:10px;
    padding:30px;
    min-height: 300px;
}
.box-help {
    margin-right:auto;
    margin-left:auto;
    margin-top:20px;
    max-width: 820px;
}
.text-gradient-season, .text-gradient-ai, .text-gradient-yellow, .text-gradient-green, .text-gradient-red, .text-gradient-blue, .text-gradient-pro {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    padding: 0 5px 10px;
}
.text-gradient-season {
    background-image: linear-gradient(156deg, #ce8c8a 29.83%, #c84581 54.62%, #2a99b7 72.27%);
}
.text-gradient-pro {
    background-image: linear-gradient(105deg, #e7a318, #f54c1c, #e20a34, #d40d86)
}
.text-gradient-ai {
      background-image: linear-gradient(270deg,#00fff7,#a100ff,yellow,#ff0099,#00c3ff,lime);
      background-size: 300% 300%;
      opacity: 0;
      transition: opacity 0.3s ease;
    
}
.text-gradient-ai.visible {
    animation: gradientShift 3s ease 0s 1 forwards;
  opacity: 1;
}
.text-gradient-yellow {
    background-image: linear-gradient(120deg, #c59e00, #ffd429, #b88e05);
}
.text-gradient-green {
    background-image: linear-gradient(120deg, #3bff88, #64d2ff, #52e5e7);
}
.text-gradient-red {
    background-image: linear-gradient(90deg, #3616c4, #e4084e, #af059d);
}
.text-gradient-blue {
    background-image: linear-gradient(120deg, #2065ad, #63c8ff, #0d1ac2);
}
.background-gradient-ai {
    background: linear-gradient(to bottom right,#0096FF,#BB64FF,#F55273);
}
.background-gradient-season {
    background: linear-gradient(170deg, #fec31f 0%, #CE8C8A 21%, #807379 41%, #2B7589 60%);
}
.background-gradient-blue {
    background: linear-gradient(360deg, #000000, #2665af 16.81%, #2065ad 42.44%, #4bbdfb 72.69%, #000000 98.32%);
}
.background-gradient-gray {
    background: linear-gradient(337deg, #bdc3c7 17.65%, #2c3e50 19.75%, #2c3e50 69.75%, #000000 79.83%);
}
.background-gradient-red {
    background: linear-gradient(-20deg, #fec31f 0%, #ce3065 20%, #15031e 55%, #000000 80%);
}

.background-gradient-blue-bottom {
    background: linear-gradient(200deg, #16c7c9 4%, #3573e0 20%, #1b6be9 47.48%, #000000 88.24%);
}
.background-primary {
    background-color:#fafafa;
}
.background-secondary {
    background-color:#cccccc;
}
.background-tertiary {
    background-color:#dddddd;
}
.background-black {
    background-color:#000;
}
.price-plan {
    font-weight: 200;
    font-size: 45px;
    letter-spacing: .006em;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    line-height: 1;
}
.price-plan-period {
    font-weight: 200;
    margin-top: 4px;
    margin-bottom: 0px;
    font-size: 16px;
    text-align: center;
}
.price-plan-small {
    font-size: 14px;
}
.price-plan-descr, .price-plan-amt {
    font-weight: 300;
    margin-top: 4px;
    margin-bottom: 4px;
}
.price-plan-amt {
    font-weight: 400;
    color: #007AFF;
}
.more {
    text-decoration: none;
}
.more::after {
    color: inherit;
    display: inline-block;
    font-style: normal;
    font-weight: inherit;
    font-size: inherit;
    line-height: 1;
    text-decoration: underline;
    position: relative;
    z-index: 1;
    alt: '';
}
.more:after {
    content: "»"
}
.more::after {
    padding-left: .2em;
    top: 0;
}
.more::after {
    text-decoration: none;
}
.shadow_word {
    text-shadow: -1px 0 #aaaaaa, 0 1px #aaaaaa, 1px 0 #aaaaaa, 0 -1px #aaaaaa;
}
.huge_word {
    font-size: 11vw;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}
.large_word {
    font-size: 9vw;
    font-weight: 700;
    text-transform: uppercase;
}
.medium_word {
    font-size: 8vw;
    font-weight: 700;
    text-align: center;
}
.help-section{
    text-align: center;
    margin-left:  0px;
    margin-right: 0px;
    min-height: 270px;
}
.clickable {
    text-decoration:none;
    color: #000000;
}
.glyph-support {
    width: 24px;
}
.icon-support {
    width: 30px !important;
    max-width: 30px !important;
    max-height: 30px;
}
.clickable table {
    height: 45px;
    border-radius: 10px;
    max-width:540px;
}
.clickable table td {
    padding-left:0px;
    padding-right:0px;
}
.clickable table:hover {
    background: #eeeeee;
}

@media (min-width: 768px) {
    h1 {
        font-size: 48px;
        font-weight: 600 ;
    }
    h2 {
        font-size: 40px;
        font-weight: 600 ;
    }
    h3 {
        font-size: 32px;
        font-weight: 500 ;
    }
    h4 {
        font-size: 24px;
    }
    .huge_word {
        font-size: 9vw;
    }
    .large_word {
        font-size: 7vw;
    }
    .medium_word {
        font-size: 6vw;
    }
    .bs-docs-featurette {
        padding-top: 80px;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 80px;
    }
    .col-sm-4 {
        margin-top: 0px;
    }
    .large_img {
        max-width: 380px;
    }
    .space {
        margin-top: 100px;
    }
    .squircle_mask {
        width: 130px
    }
    img.squircle_mask {
        margin-bottom: 45px;
    }
    .col-sm-5.app-center {
        margin-top: 300px;
    }
}
button.stripe-button-el,
button.stripe-button-el>span{
    background-color: #007AFF !important;
    background-image: none;
    min-height: 40px !important;
    line-height: 40px!important;
}
div.Button-content {
    background-image: none !important;
    background-color: #007AFF !importants;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    color: #333333;
    background-color: #222222;
}
.dropdown-menu a {
    display: block;
    color: #555;
    font-weight: 300;
    font-size: 14px;
    padding-left: 10px;
    height: 40px;
    padding-top: 10px;
}
.dropdown-columns {
    columns: 2;
    column-gap: 1rem;
    width: 400px;
    padding: 1rem;
}
.dropdown-columns .dropdown-item {
  break-inside: avoid; /* keep items from breaking between columns */
  white-space: nowrap;
}
.dropdown-menu {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 32px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(51.3px);
    -webkit-backdrop-filter: blur(51.3px);
    border: 1px solid rgba(255, 255, 255, 0.32);
}
.dropdown-menu[data-bs-popper] {
    top: 40px;
}
.dropdown-item:focus, .dropdown-item:hover {
    border-radius: 26px;
    color: #000;
    background: rgba(220, 220, 220, 0.96);
}
.dropdown-item.active, .dropdown-item:active {
    color: #000;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.16);
}
.flag-icon {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 1.5em;
    line-height: 1.5em;
    margin-right: 8px;
}
.flag-icon-background {
    background-size:contain;
    background-position:50%;
    background-repeat:no-repeat
}
.flag-icon:before{content:"\00a0"}
.app-icon-art{
    text-align: center;
    width:90px;
    display: inline-block;
    padding-top:18px;
}
.app-icon-art p{
    font-size: 12px;
}
.app-icon-art img{
    height: 42px;
    max-width:42px;
    margin-bottom:4px;
}
.app-intro h2 {
    font-size:32px;
}
.app-artwork-icon {
    width: 80px;
    margin-top: 80px;
}
.app-artwork {
    background-color:#f1f1f1;
    min-height: 380px;
}
.app-intro {
    text-align: center;
    margin-top: 30px;
    min-height: 380px;
}
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.9)' stroke-width='1.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-dark .navbar-toggler {
    border-color: rgba(0,0,0,0);
}
@media (min-width: 576px){
    .iphone {
        width: 100%;
        max-width: 320px;
    }
    .huge_word {
        font-size: 8vw;
    }
    .large_word {
        font-size: 7vw;
    }
    .medium_word {
        font-size: 6vw;
    }
}
@media (min-width: 1080px) {
    .huge_word {
        font-size: 7vw;
    }
    .large_word {
        font-size: 6vw;
    }
    .medium_word {
        font-size: 5vw;
    }
    .large_img {
        max-width: 420px;
    }
}
@media (min-width: 1280px) {
    .huge_word {
        font-size: 100px;
    }
    .large_word {
        font-size: 80px;
    }
    .medium_word {
        font-size: 70px;
    }
}
@media (prefers-color-scheme: dark) {
    .navbar-dark .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='1.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
    .navbar {
        background: rgba(0, 0, 0, 0.76);
    }
    .nav-item a {
        color: #FFFFFF;
    }
    .nav-link a:hover {
    color: #CCCCCC;
    }
    .dropdown-item:focus, .dropdown-item:hover {
    background: rgba(61, 61, 61, 1);
    }
    #dropdown-language {
        color: #FFFFFF;
    }
    .navbar-brand img {
        content:url(/images/starkode-white.png);
    }
    .app-store-badge {
      display: inline-block;
      width: 200px;
      height: 66px; /* Adjust based on your image ratio */
      background-image: url('/images/App_Store_Badge.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      text-indent: -9999px; /* Hide any text if needed */
    }
    .mac-store-badge {
      display: inline-block;
      width: 200px;
      height: 66px; /* Adjust based on your image ratio */
      background-image: url('/images/Mac_Store_Badge.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      text-indent: -9999px; /* Hide any text if needed */
    }
    .glyph-support {
        fill:white;
        filter: invert(100%);
    }
    .clickable {
        color: #ffffff;
    }
    .clickable table:hover {
        background: #111111;
    }
    .app-artwork {
        background-color:#555555;
    }
    .disclamer a {
        color: #aaa;
    }
    .navbar-nav .open .dropdown-menu,
    .dropdown-menu {
        background-color: #222222;
    }
    .feature_mask {
        filter: invert(100%);
    }
    .dropdown-menu a {
        color: #ffffff;
    }
    .bs-docs-featurette {
        border-bottom: 1px solid #666666;
    }
    .round-green {
        background-color: #32D74B;
    }
    .round-blue, .round-back{
        background-color: #0A84FF;
    }
    a, .price-plan-amt , div.Button-content  {
        color: #0A84FF;
    }
    .btn-outline,
    button.stripe-button-el,
    button.stripe-button-el>span {
        background-color: #0A84FF;
    }
    .link_title , .link_subtitle {
        color:#fafafa;
    }
    .label-primary {
        color: #ffffff;
    }
    .label-secondary {
        color: #dddddd;
    }
    .label-tertiary {
        color: #bbbbbb;
    }
    .background-primary {
        background-color:#000000;
    }
    .background-secondary {
        background-color:#222222;
    }
    .background-tertiary {
        background-color:#333333;
    }
    body {
        background-color:#000000;
    }
    body, p {
        color: #fff;
    }
}
.stripe-button-el {
    overflow: hidden;
    display: inline-block;
    visibility: visible !important;
    background-image: -webkit-linear-gradient(#28a0e5, #015e94);
    background-image: -moz-linear-gradient(#28a0e5, #015e94);
    background-image: -ms-linear-gradient(#28a0e5, #015e94);
    background-image: -o-linear-gradient(#28a0e5, #015e94);
    background-image: -webkit-linear-gradient(#28a0e5, #015e94);
    background-image: -moz-linear-gradient(#28a0e5, #015e94);
    background-image: -ms-linear-gradient(#28a0e5, #015e94);
    background-image: -o-linear-gradient(#28a0e5, #015e94);
    background-image: linear-gradient(#28a0e5, #015e94);
    -webkit-font-smoothing: antialiased;
    border: 0;
    padding: 1px;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor:pointer
}
.stripe-button-el::-moz-focus-inner {
    border: 0;
    padding:0
}
.stripe-button-el span {
    display: block;
    position: relative;
    padding: 0 12px;
    height: 30px;
    line-height: 30px;
    background: #1275ff;
    background-image: -webkit-linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
    background-image: -moz-linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
    background-image: -ms-linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
    background-image: -o-linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
    background-image: -webkit-linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
    background-image: -moz-linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
    background-image: -ms-linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
    background-image: -o-linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
    background-image: linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    -ms-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    -o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius:4px
}
.stripe-button-el:not(:disabled):active, .stripe-button-el.active {
    background:#005d93
}
.stripe-button-el:not(:disabled):active span, .stripe-button-el.active span {
    color: #eee;
    background: #008cdd;
    background-image: -webkit-linear-gradient(#008cdd, #008cdd 85%, #239adf);
    background-image: -moz-linear-gradient(#008cdd, #008cdd 85%, #239adf);
    background-image: -ms-linear-gradient(#008cdd, #008cdd 85%, #239adf);
    background-image: -o-linear-gradient(#008cdd, #008cdd 85%, #239adf);
    background-image: -webkit-linear-gradient(#008cdd, #008cdd 85%, #239adf);
    background-image: -moz-linear-gradient(#008cdd, #008cdd 85%, #239adf);
    background-image: -ms-linear-gradient(#008cdd, #008cdd 85%, #239adf);
    background-image: -o-linear-gradient(#008cdd, #008cdd 85%, #239adf);
    background-image: linear-gradient(#008cdd, #008cdd 85%, #239adf);
    -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
    -ms-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
    -o-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.1)
}
.stripe-button-el:disabled, .stripe-button-el.disabled {
    background: rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow:none
}
.stripe-button-el:disabled span, .stripe-button-el.disabled span {
    color: #999;
    background: #f8f9fa;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
}
.glass {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(11.3px);
    -webkit-backdrop-filter: blur(11.3px);
    border: 1px solid rgba(255, 255, 255, 0.32);
}

.device-stack {
  position: relative;
  max-width: 1000px;
  padding-top: 50%;
}

.device {
  position: absolute;
}

/* Posiciones */
.imac-3stack {
  z-index: 2;
  width: 90%;
  left: 0%;
  bottom: 0;
  transition-delay: 0.2s;
}
.ipad-3stack {
  z-index: 1;
  width: 80%;
  left: 20%;
  bottom: 25px;
  transition-delay: 0.4s;
}
.iphone-3stack {
  z-index: 3;
  width: 25%;
  left: 5%;
  bottom: 25px;
  transition-delay: 0.6s;
}

/* Cuando entra en vista */
.fade-in-section.visible .device {
  opacity: 1;
  transform: translateY(0);
}
.circle {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 100px auto;
}

.circle-img {
  position: absolute;
  width: 80px;
  height: auto;
  transform: translate(-50%, -50%) scale(1); /* set base transform */
  animation: zoom 6s ease-in-out infinite;
  transition: transform 0.3s ease;
}

/* Positions with consistent center alignment */
.img1 { top: 0%;    left: 50%; animation-delay: 0s; }
.img2 { top: 20%;   left: 85%; animation-delay: 1s; }
.img3 { top: 60%;   left: 85%; animation-delay: 2s; }
.img4 { top: 80%;  left: 50%; animation-delay: 3s; }
.img5 { top: 60%;   left: 15%; animation-delay: 1s; }
.img6 { top: 20%;   left: 15%; animation-delay: 2s; }
.img7 { top: 40%;   left: 50%; animation-delay: 3s; }

@keyframes zoom {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.20);
    z-index: 1;
  }
}

.stack-fan {
  position: relative;
  width: 500px;
  height: 470px; /* altura de la imagen más alta */
  margin: 0 auto;
  overflow: visible;
}

/* Todas las imágenes comparten estas reglas base */
.iphone-fan {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 3s ease, left 3s ease;
  transform: translate(-50%, -50%);
}

/* Alturas específicas por hilera */
.fan-left-back,
.fan-right-back {
  height: 359px;
  z-index: 1;
}

.fan-left-front,
.fan-right-front {
  height: 427px;
  z-index: 2;
}

.fan-center {
  height: 500px;
  z-index: 3;
}

/* Posiciones INICIALES – apiladas, centradas verticalmente, parcialmente visibles */
.fan-left-back {
  transform: translate(-150%, -50%);
}

.fan-left-front {
  transform: translate(-100%, -50%);
}

.fan-center {
  transform: translate(-50%, -50%);
}

.fan-right-front {
  transform: translate(0%, -50%);
}

.fan-right-back {
  transform: translate(50%, -50%);
}

.stack-fan.open .fan-left-back {
  left: 0%;
  transform: translate(-70%, -50%);
}

.stack-fan.open .fan-left-front {
  left: 12%;
  transform: translate(-35%, -50%);
}

.stack-fan.open .fan-center {
  transform: translate(-50%, -50%) scale(0.95);
}

.stack-fan.open .fan-right-front {
  left: 88%;
  transform: translate(-65%, -50%);
}

.stack-fan.open .fan-right-back {
  left: 100%;
  transform: translate(-30%, -50%);
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
    background-size: 300% 300%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
    background-size: 100% 100%;
  }
}