.div-ancho-completo h1, .div-ancho-completo h2, .div-ancho-completo h3, .div-ancho-completo p {
    color: var(--color-white)!important;
}
.div-ancho-completo h2 {
    text-align: center;
}
.div-ancho-completo p {
    text-align: justify;
}
.div-ancho-completo strong{
    color: var(--color-amarillo01);
}
.div-ancho-completo a {
    color: var(--color-verde01);
}
.div-ancho-completo a:hover {
    color: #FFC107;
}
.div-oportunidad, .div-quien, .div-beneficios, .div-bonos {
    background-color: var(--color-black);
    padding: 2rem 3.5rem;
}
.div-oportunidad .wp-block-image {
    text-align: center;
}
.div-ancho-completo .wp-block-button .wp-block-button__link {
    border-color: var(--color-white);
    background-color: var(--color-verde01);
}

.div-col-quien {
    background-color: rgb(255, 255, 255, 0.2);
    padding: 2rem;
    border-radius: 10px;
}
.div-quien h4 {
    color: var(--color-verde01)!important;
    text-align: center;
    margin-bottom: 2rem;
}
.div-ancho-completo ul {
    color: var(--color-white);
}
.div-porque-texto {
    border-left: 4px solid #FFC107;
    margin: 1rem;
    background-color: rgb(255, 255, 255, 0.2);
}
.div-porque-texto p {
    padding: 1.5rem;
}
.div-col-porque {
    padding: 1rem;
    border-radius: 10px;
    background-color: rgb(0, 165, 80);
    
    text-align: center;
}
.div-col-porque p {
    color: var(--color-black)!important;
    text-align: center;
}
.div-porque-icono {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
}

.div-porque-icono::before {
    content: '';
    width: 5rem; /* Aumentado un poco para mejor detalle */
    height: 5rem;
    background-repeat: no-repeat !important;
    background-position: center;
    background-size: 70% !important; /* Iconos más contenidos */
    background-color: var(--color-black);
    border-radius: 50%;
    border: solid 4px rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.svg-inversion::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-11-.3-11 5 0 1.8 0 3 2 4.5V20h4v-2h2v2h4v-2c2-1.5 2-2.7 2-4.5 0-5.3-7.5-6.5-11-5' fill='rgba(107, 92, 165, 0.3)'/%3E%3Cpath d='M12 2v4' stroke='%236B5CA5' stroke-width='2'/%3E%3Cpath d='M10 4h4' stroke='%236B5CA5' stroke-width='2'/%3E%3C/svg%3E");
}
.svg-flexibilidad::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2' fill='white'/%3E%3Cpath d='M5 20h14'/%3E%3Cpath d='M7 20v-5l3-2h4l1 2v5' fill='rgba(230, 181, 102, 0.3)'/%3E%3Cpath d='M11 13V9l-3-1'/%3E%3Crect x='13' y='10' width='4' height='2' rx='0.5' fill='%23E6B566'/%3E%3C/svg%3E");
}
.svg-acompañamiento::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0'/%3E%3Cpath d='M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2'/%3E%3Cpath d='M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8' stroke='%237BBF9E'/%3E%3Cpath d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15' fill='rgba(123, 191, 158, 0.2)'/%3E%3C/svg%3E");
}
.div-quien-lista {
    padding: 2rem;
    border-radius: 10px;
    background-color: rgb(255, 255, 255, 0.1);
}
.div-quien-lista ul {
    color: var(--color-white)!important;
    list-style-type: none;
}
.div-quien-lista ul li::before {
    content: "\f14a";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 1.2rem;
	line-height: 1.5;
	color: #FFC107;
    padding-right: 1rem;
}
.div-video {
    padding: 3rem;
}
.div-col-invertir {
    background-color: rgb(114 159 136);;
    padding: 2rem;
    border-radius: 10px;
}
.div-col-invertir a {
    color: var(--color-white);
}
.div-col-invertir a:hover {
    color: var(--color-black);
}
.div-col-invertir h3 {
    color: var(--color-black)!important;
    padding-bottom: 1rem;;
}
.div-col-invertir ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.div-col-invertir ul li {
    display: flex;
    align-items: flex-start; /* alinea icono con primera línea */
    gap: 0.75rem; /* espacio entre icono y texto */
    margin-bottom: 0.6rem;
    color: var(--color-black)!important;
}
.div-col-invertir ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--color-magenta02);
    flex-shrink: 0; /* evita que el icono se deforme */
}
.div-lista-beneficios {
    justify-items: center;
}
.div-lista-beneficios h3 {
    list-style: none;
    padding-bottom: 1rem;
}
.div-lista-beneficios ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.div-lista-beneficios ul li {
    display: flex;
    align-items: flex-start; /* alinea icono con primera línea */
    gap: 0.75rem; /* espacio entre icono y texto */
    margin-bottom: 0.6rem;
}
.div-lista-beneficios ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.2rem;
    color: #FFC107;
    flex-shrink: 0; /* evita que el icono se deforme */
}
.div-formas {
    border-left: 4px solid #FFC107;
    margin: 1rem;
    padding: 0.5rem;
    background-color: rgb(255, 255, 255, 0.2);
}
.div-beneficios h3 {
    padding: 1rem 0;
}
.div-beneficios strong {
    color: #FFC107;
}
.div-formas p {
    padding: 0 1rem;
    margin: 0;
}
.div-paso h3 {
    text-align: center;
    color: var(--color-verde01)!important;
    padding-top: 3rem;
}
.div-paso p {
    text-align: center;;
}
.div-bonos h2 {
    padding-bottom: 1rem
}
.div-bonos .div-formas {
    border-left: 4px solid #FFC107;
    margin: 1rem;
    padding: 0.5rem;
    background-color: rgb(255, 255, 255, 0.2);
}
.div-bonos h3 {
    padding: 1rem 0;
}
.div-bonos strong {
    color: #FFC107;
}
.div-bonos p {
    padding: 0 1rem;
    margin: 0;
}
/*Preguntas Frecuentes*/

/* Contenedor */
.detalles {
    background-color: #111;
    border-radius: 12px;
    margin: 1rem 0;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,.6);
    transition: all .3s ease;
}

/* SUMMARY */
.detalles summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1rem 1rem 3rem;
    color: var(--color-black);
    font-weight: 500;
    background: linear-gradient(135deg, rgb(0, 165, 80), rgb(135 187 161));
    position: relative;
    transition: all .3s ease;
}

/* Hover */
.detalles summary:hover {
    filter: brightness(1.1);
}

/* ICONO + */
.detalles summary::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='8' y='8' width='84' height='84' rx='18' fill='none' stroke='black' stroke-width='4'/%3E%3Cline x1='50' y1='30' x2='50' y2='70' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='30' y1='50' x2='70' y2='50' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
    transition: transform .3s ease;
}

/* OPEN */
.detalles[open] summary {
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

/* ICONO - */
.detalles[open] summary::before {
    transform: translateY(-50%) rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='8' y='8' width='84' height='84' rx='18' fill='none' stroke='black' stroke-width='4'/%3E%3Cline x1='30' y1='50' x2='70' y2='50' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* CONTENIDO */
.detalles p {
    padding: 1.2rem 1.5rem;
    margin: 0;
    color: #e0e0e0;
    line-height: 1.6!important;
    background-color: #fff8f824;
    animation: fadeIn .35s ease;
}

/* ANIMACIÓN */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*MOVILES*/
@media (max-width: 768px) {
    .div-quien .wp-block-column {
        justify-items: center;
    }
}