.single-casos-de-exito .menu-burguer__icon {
    border: 1px solid #fff;
}

.success-storie__hero {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.success-storie__hero__container {
    width: 100%;
    height: 100vh;
    z-index: 0;
    position: relative;
}

.success-storie__hero__overlay {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 2;
    opacity: 0;
}

.success-storie__hero-slide {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.success-storie__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.success-storie__hero-content {
    width: 100%;
    position: absolute;
    bottom: 9%;
    left: 50%;
    transform: translate(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

.success-storie__hero-title-container {
    overflow: hidden;
}

.success-storie__hero-title {
    font-size: clamp(50px, 10vw, 60px);
    line-height: 1;
    letter-spacing: -1.8px;
    color: var(--global-palette9);
}

.success-storie__hero-subtitle {
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -0.42px;
    color: var(--global-palette9);
    width: 584px;
}

.success-storie__hero-arrows__container {
    width: 100%;
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.success-storie__hero-arrows {
    width: 130px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
}

.success-storie__hero-arrows  img {
    width: 61px;
    height: 61px;
    cursor: pointer;
}

/* Sección de navegación interna post-hero */

.inside__nav {
    --inner-pad: 28px;

    position: relative;
    z-index: 88888;
    width: 100%;
    background-color: var(--global-palette7);
}

.inside__nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inside__nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inside__nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    display: block;
    padding: var(--inner-pad) calc(var(--inner-pad) * 2);
    text-transform: uppercase;
    color: var(--tt-dark) !important;
}

.inside__nav-item:hover {
    color: var(--global-palette9);
    background-color: var(--tt-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.success-storie__box__container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.inside__nav .success-storie__box__container {
    position: absolute;
    right: 0;
}

.success-storie__box {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.success-storie__box__prev {
    padding: var(--inner-pad);
    aspect-ratio: 1;
    background-color: var(--tt-primary);
}

.success-storie__box__prev:hover {
    background-color: var(--tt-hover);
    cursor: pointer;
}

.success-storie__box__next {
    padding: var(--inner-pad);
    aspect-ratio: 1;
    background-color: var(--tt-dark);
}

.success-storie__box__next:hover {
    background-color: var(--global-palette5);
    cursor: pointer;
}

/* Sección de presentación */

.success-storie__presentation {
    position: relative;
    background-color: var(--global-palette9);
    z-index: 5;
    width: 100%;
    padding: 100px 0 100px 0;
}

.success-storie__presentation-container {
    width: 100%;
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 8rem;
}

.success-storie__data {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3rem;
}

.success-storie__logo {
    width: 350px;
}

.success-storie__data-info {
    border-top: 1px dotted var(--global-palette5);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    padding: 3rem 0 1.5rem 0;
}

.success-storie__data-info p {
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: -0.42px;
    width: 670px;
}

.success-storie__introduction {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 0 0 0 150px;
}

.success-storie__social-menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

.success-storie__social-icon {
    fill: var(--global-palette9);
    background-color: var(--tt-dark);
    border-radius: 50%;
    padding: 12px;
    border: none;
    overflow: visible;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.success-storie__social-icon:hover {
    background-color: var(--tt-primary);
}

.success-storie__title-container {
    overflow: hidden;
}

.success-storie__title {
    font-size: 42px;
    line-height: 1;
    letter-spacing: -1.26px;
    width: 670px;
}

.success-storie__description {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
}

.success-storie__description p {
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: -0.42px;
    width: 670px;
}

/* Sección de objetivo */

.success-storie__objetive {
    width: 100%;
    padding: 150px 0 150px 0;
    background-color: var(--global-palette8);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.success-storie__objetive-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem;
}

.success-storie__objetive-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
}

.success-storie__objetive-title__container {
    overflow: hidden;
}

.success-storie__objetive-title {
    font-size: 42px;
    line-height: 1;
    letter-spacing: -1.26px;
}

.success-storie__objetive-description p {
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: -0.42px;
    width: 540px;
}

.success-storie__cita {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
    background-color: var(--global-palette9);
    padding: 4rem 5rem 8rem 5rem;
    width: 580px;
}

.success-storie__cita img,
.success-storie__cita svg {
    width: 128px;
    height: 101px;
    color: var(--tt-primary);
}

.success-storie__cita h2 {
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.96px;
    width: 430px;
}

.success-storie__objetive__background-img {
    position: absolute;
    left: -200px;
    bottom: -100px;
    opacity: 0.03;
    z-index: -1;
    scale: 1.5;
    width: 100%;
    height: 100%;
    clip-path: inset(0 100% 0 0);
}

/* Sección de tareas */

.success-storie__tasks {
    z-index: 2;
}

.success-storie__tasks-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.success-storie__tasks-boxes {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    height: 82px;
    width: 100%;
}

.success-storie__tasks-box {
    width: 82px;
    height: 82px;
}

.success-storie__tasks-box:nth-child(1) {
    transform: translateX(82px);
    background-color: var(--tt-primary);
}

.success-storie__tasks-box:nth-child(2) {
    transform: translateY(-82px) translateX(82px);
    background-color: var(--tt-dark);
}

.success-storie__tasks-content {
    width: 100%;
    position: relative;
    height: 650px;
}

.success-storie__tasks-item {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4rem;
    padding: 6rem 0 0 0;
}

.success-storie__tasks-title {
    font-size: 42px;
    line-height: 1;
    letter-spacing: -1.26px;
    overflow: hidden;
}

.success-storie__tasks-header {
    display: grid;
    grid-template-columns: 1fr 3fr 2fr;
    align-items: start;
    gap: 2rem;
}

.success-storie__task-number {
    align-self: start;
    display: block;
    font-size: 200px;
    line-height: .85;
    letter-spacing: -6px;
    color: var(--tt-primary);
    font-family: var(--global-heading-font-family);
}

.success-storie__task-header-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
}

.success-storie__task-title {
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -0.72px;
    width: 425px;
}

.success-storie__task-description {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

.success-storie__task-description p {
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: -0.42px;
    width: 413px;
}

.success-storie__task-image {
    width: 100%;
    height: 472px;
}

/* Galería */

.success-storie__galery {
    width: 100%;
    padding: 0 0 150px 0;
}

.success-storie__galery-content{
    display: grid;
    gap: 4rem;
    margin-top: 2rem;
}

.success-storie__galery-content img {
    width: 100%;
    height: 100%;
}

/* Resultados */

.success-storie__results {
    width: 100%;
    padding: 150px 0 150px 0;
}

.success-storie__results-container {
    display: grid;
    gap: 4rem;
}

.success-storie__results-header,
.success-storie__results-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20vw;
}

.success-storie__results-titles {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.success-storie__results-titles__container {
    overflow: hidden;
}

.success-storie__results-title {
    font-size: 42px;
    line-height: 1;
    letter-spacing: -1.26px;
}

.success-storie__results-subtitle {
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -0.72px;
    width: 80%;
}

.success-storie__results-description {
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: -0.42px;
}

.success-storie__results-boxes {
    --inner-size: 86px;
    margin-top: var(--inner-size);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.success-storie__results-box:nth-child(1) {
    transform: translateY( calc(var(--inner-size) * -1 ) );
    width: var(--inner-size);
    height: var(--inner-size);
    background-color: var(--tt-dark);
}

.success-storie__results-box:nth-child(2) {
    width: var(--inner-size);
    height: var(--inner-size);
    background-color: var(--tt-primary);
}

.success-storie__results-description {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

.success-storie__results-percentages {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.success-storie__results-percentages-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start ;
    align-items: center;
    gap: 3rem;
}

.chart {
    position: relative;
}

@property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0turn; /* empieza sin borrar */
  }

.chart__circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--global-palette9);
    z-index: 2;
    -webkit-mask-image: conic-gradient(
    from -360deg,                     /* arranca en las 12 */
    transparent 0 var(--angle),      /* sector que se borra */
    #000 var(--angle) 1turn          /* resto visible */
  );
          mask-image: conic-gradient(from -360deg, transparent 0 var(--angle), #000 var(--angle) 1turn);
}

.chart__percentage {
    font-size: 42px;
    line-height: 0.65;
    letter-spacing: -1.26px;
    z-index: 1;
}

.success-storie__results-percentages-item:nth-child(1) .chart {
    width: 277px;
    height: 277px;
    border-radius: 50%;
    background: conic-gradient(
        var(--tt-primary) 0% 71%,
        var(--global-palette7) 71% 100%
    );
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.success-storie__results-percentages-item .chart::before {
    content: "";
    position: absolute;
    width: 177px;
    height: 177px;
    border-radius: 50%;
    background-color: white;
}

.success-storie__results-percentages-item:nth-child(2) .chart {
    width: 277px;
    height: 277px;
    border-radius: 50%;
    background: conic-gradient(
        #A8A8A8 0% 85%,
        var(--global-palette7) 85% 100%
    );
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.success-storie__results-percentages-item:nth-child(2) .chart::before {
    content: "";
    position: absolute;
    width: 177px;
    height: 177px;
    border-radius: 50%;
    background-color: white;
}

.success-storie__results-percentages-item:nth-child(3) .chart {
    width: 277px;
    height: 277px;
    border-radius: 50%;
    background: conic-gradient(
        var(--tt-dark) 0% 60%,
        var(--global-palette7) 60% 100%
    );
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.success-storie__results-percentages-item:nth-child(3) .chart::before {
    content: "";
    position: absolute;
    width: 177px;
    height: 177px;
    border-radius: 50%;
    background-color: white;
}

.success-storie__results-percentages-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    width: 302px;
}

.success-storie__results-percentages-item h2 {
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -0.72px;
    text-align: center;
}

.success-storie__results-percentages-item p {
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: -0.36px;
    text-align: center;
}




.success-storie__results-numbers {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8vw;
}

.success-storie__results-numbers-item {
}

.success-storie__results-numbers-item > .success-storie__results-number-icon {
    color: var(--tt-dark);
    opacity: 0.15;
}

.success-storie__results-numbers-item > .success-storie__results-number-number {
    font-size: 85px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -4px;
    display: inline-flex;
    gap: 2px;

    color: var(--inner-num-color, #000);
}

.success-storie__results-numbers-item > .success-storie__results-number-unit {
    font-size: 26px;
    line-height: 1;
    font-weight: 300;
}

.success-storie__results-numbers-item > .success-storie__results-number-title {
    font-size: 24px;
    line-height: 1.05;
    font-weight: 700;
    margin-top: 24px;
}

.success-storie__results-numbers-item > .success-storie__results-number-desc {
    font-size: 18px;
    line-height: 1.3;
    margin-top: 14px;
}




/* Claim */

.success-storie__claim {
    width: 100%;
}

.success-storie__claim-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    width: 689px;
    margin: 0 auto;
    text-align: center;
}

.success-storie__claim-title {
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.96px;
}

.success-storie__claim-subtitle {
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: -0.36px;
}