.efecto-br {
    position: relative;
    margin-top: -21px;
  }

.espacio-40 {
    margin-bottom: 40px !important;
}

.espacio-24 {
    margin-bottom: 24px !important;
}

.seocom-padding {
    padding: 0 !important;
}

.h2-margintop0 {
    margin-top: 0 !important;
}


.pad-bot {
    padding-bottom: 70px !important;
}
.play-button {
    width: 90px;
    height: 90px;
  }
  

  @media (min-width: 767px) and (max-width: 1023px) {
    .wp-container-core-columns-is-layout-fabadb26 {
        gap: 50px !important;
    }

    .seocom-sticky-inner {
        flex-direction: row !important;
        gap: 6px;
    }
    .kpi-percent {
        font-size: 64px !important; 
    }

    .flex-nowrap {
        flex-wrap: nowrap !important;
        gap: 25px !important;
        padding: 20px;
    }
    .caja-porcentajes {
        padding: 30px !important;
    }
    .reverse-mobile {
        display: flex !important;
        flex-direction: row !important;
    }
    .img-full-mobile img {
        width: calc(100% + 48px);
        max-width: calc(100% + 48px);
        height: 324px;
        margin-left: -24px;
        margin-right: -24px;
        object-fit: cover;
        display: block;
    }
    .wp-container-core-columns-is-layout-d52059b8 {
        gap: 80px !important;
    }
    .wp-container-core-columns-is-layout-049f093f {
        flex-wrap: nowrap !important;}
}

@media (min-width: 420px) and (max-width: 767px) {
    .seocom-sticky-right {
        margin: 0;
        font-size: 15px !important;
        margin-right: 20px !important;
    }

    .seocom-sticky-inner {
        flex-direction: row !important;
    }
    .reverse-mobile {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
    .img-full-mobile img {
        width: calc(100% + 48px);
        max-width: calc(100% + 48px);
        height: 324px;
        margin-left: -24px;
        margin-right: -24px;
        object-fit: cover;
        display: block;
    }
    
    
        
}


/*FONT SANS*/
/* Tipografía solo para esta página */
.page-id-38818 * {
    font-family: "Albert Sans", sans-serif !important;
}

/* Títulos grandes (mockup: 80px / 90px line-height) */
.page-id-38818 h1 {
    font-weight: 300;
    font-size: 80px;
    line-height: 90px;
    color: #ffffff;
}

/* Subtítulos o textos destacados (mockup: 24–36px) */
.page-id-38818 h2,
.page-id-38818 h3 {
    font-weight: 600;
    color: #ffffff;
}

/* Párrafos (mockup: 16–18px) */
.page-id-38818 p {
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
}

/* CTA botón (mockup: uppercase + bold + 16px) */
.page-id-38818 .seocom-btn {
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    background-color: #FF2B80;
    color: #ffffff !important;
    padding: 16px 32px;
    border-radius: 8px;
    display: inline-block;
}

/* Hover CTA */
.page-id-38818 .seocom-btn:hover {
    background-color: #e02672;
}

/* Contenedor interno centrado y limitado */
.seocom-container {
    width: 100%;
    max-width: 950px !important;
    margin: 0 auto !important;
}

.seocom-container.mas-ancho {
    max-width: 950px;
}

.seocom-container.menos-ancho {
    max-width: 757px !important;
}

.seocom-container.caja-838 {
    max-width: 838px !important;
    margin-bottom: 40px !important;
}

/* TITULAR PRINCIPAL (mockup: 300 Light) */
.page-id-38818 h1 {
    font-weight: 300 !important;
}

/* TITULARES SECUNDARIOS (mockup: 600 Semibold) */
.page-id-38818 h2 {
    font-weight: 400 !important; 

    &.font-400 {
        font-weight: 400 !important;
    }
}

.page-id-38818 h3 {
    font-weight: 400 !important;
    font-size: 40px !important;
    line-height: 50px !important;
}

/* PÁRRAFOS (mockup: 400 Regular) */
.page-id-38818 p {
    font-weight: 400;
}

/* CTA (mockup: 600 Semibold) */



/*CASOS EXITO*/
/* RESET BÁSICO */


/* CONTENEDOR GRID (Requisito: 3 en fila) */
.success-cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; /* Separación entre tarjetas */
    max-width: 1283px;
    margin: 0 auto;
}

/* TARJETA INDIVIDUAL */
.success-card {
    display: flex;
    flex-direction: row;
    background-color: #211d13; /* Marrón/Negro oscuro de las stats */
    height: 400px; /* Define la altura que gustes */
    overflow: hidden;
    /* La imagen carece de bordes redondeados, se lo quitamos o dejamos sutil si prefieres (ej. 4px) */
    border-radius: 0; 
}

/* LADO IZQUIERDO: IMAGEN DE FONDO */
.success-image-section {
    position: relative;
    width: 76%; /* Ocupa buena porción del espacio */
    background-image: url('https://images.unsplash.com/photo-1531123414780-f74244c2b4d4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80');
    background-size: cover;
    background-position: center;
}

/* Superposición de degradado para que el texto blanco siempre se lea bien */
.success-image-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
}

.success-content {
    position: absolute;
    bottom: 30px;
    left: 20px;
    right: 20px;
    z-index: 2; /* Para que quede por encima del degradado */
}

/* BOTÓN DE FLECHA */
.success-icon {
    width: 44px;
    height: 44px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.success-icon svg {
    width: 20px;
    height: 20px;
    stroke: #e81165; /* Color rosa chicle / fucsia de la flecha */
}

/* TÍTULO (GIORGI LINE) */
.success-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ETIQUETAS (CONTENIDOS, SEO) */
.success-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tag {
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* LADO DERECHO: ESTADÍSTICAS */
.success-stats-section {
    width: 24%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 15px;
    z-index: 2; /* Asegura que la capa esté por encima del resto */
    background-color: rgba(26, 26, 26, 0.78);
}

.stat-item {
    text-align: center;
    padding: 15px 0;
}

/* Valor número (ej: +1000%) */
.stat-value {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

/* Estilo para los símbolos "+" y "%" para que sean más pequeños que el número */
.stat-value .sym {
    font-size: 0.55em; 
    font-weight: 600;
}

/* Etiqueta métrica (ej: Tráfico orgánico) */
.stat-label {
    font-size: 13px;
    font-weight: 400;
    color: #e6e6e6;
    line-height: 1.4;
    letter-spacing: 0.3px;
}

/* LÍNEA SEPARADORA FINA */
.stat-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    width: 60%;
    margin: 0 auto;
}

/* RESPONSIVE (Móviles y Tablets) */
@media (max-width: 1024px) {
    .success-cases-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 tarjetas en tablet */
    }
}

@media (max-width: 768px) {

    .page-id-38818 h2 {
        line-height: 40px !important;
        font-size: 28px !important; }

    .pad-bot24 {
        padding-bottom: 24px !important;
    }
    .pad-40px {
        padding: 40px 0 !important;
    }
    .success-cases-grid {
        grid-template-columns: 1fr; /* 1 tarjeta por fila en móvil */
    }
    
    .success-card {
        flex-direction: column;
        height: auto;
    }
    
    .success-image-section {
        width: 100%;
        height: 300px;
    }
    
    .success-stats-section {
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
        padding: 30px 10px;
    }

    .stat-item {
        padding: 0;
    }

    .stat-divider {
        width: 1px;
        height: 60px;
        border-top: none;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        margin: auto 10px;
    }
}

.page-id-38818 {
    padding: 0 !important;
}

.seocom-btn-new {
    vertical-align: baseline;
    display: inline-block;
    color: #FFF;
    font-size: 22px;
    font-weight: 600 !important;
    border-radius: 32px !important;
    padding: 8px 20px;
    animation: colorchange 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: running;
    text-transform: inherit;
    background-color: #FF2B80 !important;
}

.seocom-btn-new:hover {
    vertical-align: baseline;
    display: inline-block;
    color: #FFF;
    font-size: 22px;
    font-weight: 600 !important;
    border-radius: 32px !important;
    padding: 8px 20px;
    animation: colorchange 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: running;
    text-transform: inherit;
    background-color: #FA338D !important;
}

.page-id-38818 .seocom-btn,
.font-sans-bold {
    font-weight: 600 !important;
}


@media (max-width: 768px) {

    .mobile-ajuste {
        height: calc(100vh - -100px);
        min-height: calc(100vh - 100px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .success-image-section {
        height: 160px;
    }

    .stat-divider {
        display: none;
    }

    .success-stats-section {
        background-color: black;
        display: flex;
        flex-direction: column !important;
        gap: 10px;
    }

    .success-tags {
        display: none;
    }

    .espacio-40-mobile {
        margin-bottom: 40px !important;
    }

    .pad-top64 {
        padding-top: 64px !important;
    }
    .centrado {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .centrado p{
        text-align: center;
    }

    .ali-izquierda{
        text-align: left;
    }

    .pad-bot100 {
        padding-bottom: 100px !important;
    }

    .espacio-40 {
        margin-bottom: 24px !important;
    }

    /* Reducir padding del hero */
    .hero-mobile {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }

    /* Reducir margen inferior de las columnas */
    .hero-columns-mobile {
        margin-bottom: 00px !important;
    }

    /* Reducir tamaño del logo */
    .hero-mobile img {
        width: 110px !important;
    }
    .hero-title { 
    font-size: 48px !important; 
    }

    .parrafo-18 {
        font-size: 18px !important;
        padding-top: 24px !important;
    }

    .espacio-40 {
        margin: 0 0 24px 0 !important;
        padding: 0 !important;
    }

    .video-espacio {
        padding: 0 24px 64px 24px !important;
    }

    .caja-porcentajes {
        padding: 0 0 !important;
        background-color: #1a1a1a;
    }
    .efecto-br {
        padding: 64px 24px !important;
      }

    .seocom-container, .seocom-padding, .prueba-pad0 {
        padding: 0 !important;
    }
    

    .reverse-mobile { 
        display: flex !important; 
        flex-direction: column-reverse !important; }

    .img-full-mobile {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        
    }
    
    .img-full-mobile img {
        width: calc(100% + 48px);
        max-width: calc(100% + 48px);
        height: 324px;
        margin-left: -24px;
        margin-right: -24px;
        object-fit: cover;
        display: block;
        border-radius: unset !important;
    }
    .img-full-mobile figure {
        width: 100% !important;
        margin: 0 !important;
        
    }

    .presenta-contenedor {
        width: calc(100% + 48px);
        max-width: calc(100% + 48px);
        margin-left: -24px;
        margin-right: -24px;
        object-fit: cover;
        display: block;
        padding: 64px 24px !important;
    }

    .relleno-24 {
        padding: 24px !important;
    }

    .kpi-col {
        margin-bottom: 0px !important;
        text-align: center !important;

        &.last {
            margin-bottom: 0px !important;
        }
    }
    .columna-gap40 {
        gap: 40px !important;
    }
    .parrafo-20 {
        font-size: 20px !important;
        line-height: 32px !important;
        margin-top: 40px !important;
    }

    .parrafo-24 {
        font-size: 24px !important;
        line-height: 32px !important;
    }

    .margin-top-0 {
        margin-top: 0 !important;
    }

    .margin-bot-64 {
        margin-bottom: 64px !important;
    }

    .page-id-38278 h2 {
        font-size: 28px !important;
    }

    .wp-container-core-columns-is-layout-d52059b8,
    .wp-container-core-columns-is-layout-114a0905 {
        gap: 40px !important;
    }
    .pad-top-0 {
        padding-top: 0px !important;
    }
    .pad-bot-40 {
        padding-bottom: 40px !important;
    }
    .kpi-percent {
        font-size: 64px !important;
    }

    .kpi-icon {
        width: 31px !important;
        height: 44px !important;
    }

    .titulo-mobile-h3 {
        font-size: 28px !important;
    }

    .margin-top-40 {
        margin-top: 40px !important;
    }

    .play-button {
        width: 60px !important;
        height: 60px !important;}
    
    .page-id-38818 h3 {
    font-weight: 400 !important;
    font-size: 24px !important;
    line-height: 38px !important;
    }

    .seocom-btn-new {
        font-size: 18px !important;
    }

    .stat-value {
     font-size: 30px !important;
    }  
    .lista-a {
        padding: 0 !important;
    }
    .pad-bot {
        padding-bottom: 118px !important;
    }

}