.div-servicios {
    background-color: var(--color-bg-light);
    padding: 2rem 3rem 0 3rem;
}
.div-detalles {
    background-color: var(--color-bg-light);
    padding: 2rem 3rem 3rem 3rem;
}
.div-grid-servicios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    padding: 3rem 2rem;
}
.div-tarjeta {
    position: relative;
    background: 
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(
            135deg,
            rgba(0,181,226,0.35),
            rgba(140,44,136,0.45)
        ) border-box;

    border: 2px solid transparent;
    padding: 2rem;
    border-radius: 16px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    text-align: center;

    display: flex;
    flex-direction: column;
    height: 100%;

    transition: all 0.4s ease;
    cursor: pointer;
}
.div-tarjeta:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 18px 40px rgba(0,0,0,0.15),
        0 0 0 1px rgba(140,44,136,0.2);

    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(
            135deg,
            rgba(0,181,226,0.6),
            rgba(140,44,136,0.8)
        ) border-box;
}
.div-tarjeta h3 {
    margin-bottom: 1rem;
}
.div-tarjeta .wp-block-buttons {
    justify-content: center;
    margin-top: auto;
}

.div-tarjeta .wp-block-button__link {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.7rem 1.4rem;
    border-radius: 12px;
    background: #4caf50;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.svg-texto {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
    
}
.svg-texto {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.svg-texto::before {
    content: '';
    width: 5.4rem;
    height: 5.4rem;
    border-radius: 50%;

    background:
        radial-gradient(circle at top, #ffffff 35%, rgba(255,255,255,0.85) 45%) padding-box,
        linear-gradient(
            135deg,
            rgba(0,181,226,0.9),
            rgba(140,44,136,0.9)
        ) border-box;

    border: 3px solid transparent;

    background-repeat: no-repeat !important;
    background-position: center;
    background-size: 62% !important;

    box-shadow:
        0 14px 28px rgba(0,0,0,0.15),
        0 0 0 6px rgba(0,181,226,0.15),
        0 0 30px rgba(140,44,136,0.35);

    transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.svg-texto:hover::before {
    transform: translateY(-8px) scale(1.12) rotate(3deg);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.2),
        0 0 0 8px rgba(0,181,226,0.25),
        0 0 45px rgba(140,44,136,0.55);
}


.svg-biblioteca::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3C!-- Libro 1 --%3E%3Crect x='10' y='30' width='18' height='55' rx='2' fill='%232c3e50'/%3E%3Cpath d='M10 35h18M10 75h18' stroke='%23ecf0f1' stroke-width='1' opacity='0.3'/%3E%3C!-- Libro 2 --%3E%3Crect x='32' y='20' width='22' height='65' rx='2' fill='%23c0392b'/%3E%3Crect x='36' y='30' width='14' height='4' fill='%23f1c40f' opacity='0.8'/%3E%3Crect x='36' y='38' width='14' height='4' fill='%23f1c40f' opacity='0.8'/%3E%3C!-- Libro 3 (Inclinado) --%3E%3Cg transform='rotate(-10 75 85)'%3E%3Crect x='58' y='25' width='20' height='60' rx='2' fill='%232980b9'/%3E%3Cpath d='M62 35h12M62 45h12M62 55h12' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' opacity='0.5'/%3E%3C/g%3E%3C!-- Base/Estante --%3E%3Cpath d='M5 85h90' stroke='%237f8c8d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.svg-banco::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3C!-- Carita Feliz --%3E%3Ccircle cx='30' cy='40' r='25' fill='%23FFEB3B' stroke='%23FBC02D' stroke-width='2'/%3E%3Ccircle cx='22' cy='35' r='3' fill='%23333'/%3E%3Ccircle cx='38' cy='35' r='3' fill='%23333'/%3E%3Cpath d='M20 48 q10 8 20 0' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round'/%3E%3C!-- Carita Guiño --%3E%3Ccircle cx='70' cy='60' r='25' fill='%23FF7043' stroke='%23E64A19' stroke-width='2'/%3E%3Cpath d='M60 55 l6 0' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='80' cy='55' r='3' fill='%23333'/%3E%3Cpath d='M62 68 q8 6 16 0' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='58' cy='62' r='4' fill='%23FF8A65' opacity='0.6'/%3E%3Ccircle cx='82' cy='62' r='4' fill='%23FF8A65' opacity='0.6'/%3E%3C/svg%3E");
}
.svg-youtube::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3C!-- Fondo rojo sólido redondeado --%3E%3Crect x='5' y='20' width='90' height='60' rx='14' fill='%23FF0000'/%3E%3C!-- Sombra sutil interna --%3E%3Cpath d='M5 30 q0 -10 14 -10 h62 q14 0 14 10' fill='white' fill-opacity='0.1'/%3E%3C!-- Triángulo de Play blanco centrado --%3E%3Cpath d='M40 35 l25 15 -25 15 V35z' fill='white'/%3E%3C/svg%3E");
}
.svg-kit::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3C!-- Botella 1 (Ligeramente más alta) --%3E%3Crect x='10' y='30' width='20' height='55' rx='3' fill='%236e4f3a' stroke='%234a3528' stroke-width='1.5'/%3E%3C!-- Etiqueta 1 --%3E%3Crect x='10' y='50' width='20' height='15' fill='%23e0d8b0'/%3E%3Cpath d='M20 54l3 3-3 3M20 50l3 3-3 3M20 58l3 3-3 3' stroke='%234a3528' stroke-width='0.5' fill='none'/%3E%3C!-- Tapón/Cuentagotas --%3E%3Crect x='15' y='20' width='10' height='10' rx='1' fill='%23333'/%3E%3C!-- Botella 2 (Principal, en el centro) --%3E%3Crect x='40' y='25' width='20' height='60' rx='3' fill='%238c6239' stroke='%236e4f3a' stroke-width='1.5'/%3E%3C!-- Etiqueta 2 --%3E%3Crect x='40' y='45' width='20' height='20' fill='%23d8c89a'/%3E%3Cpath d='M50 50c4 0 7 3 7 7s-7 11-7 11-7-7-7-11 3-7 7-7z' fill='%232ecc71'/%3E%3Cpath d='M49 55l4 3-4 3v-6z' fill='white'/%3E%3C!-- Tapón/Cuentagotas --%3E%3Crect x='45' y='15' width='10' height='10' rx='1' fill='%23333'/%3E%3C!-- Botella 3 (Más baja y ancha) --%3E%3Crect x='70' y='35' width='20' height='50' rx='3' fill='%236e4f3a' stroke='%234a3528' stroke-width='1.5'/%3E%3C!-- Etiqueta 3 --%3E%3Crect x='70' y='55' width='20' height='15' fill='%23c8e6c9'/%3E%3Ccircle cx='80' cy='62.5' r='3' fill='%2316a085'/%3E%3C!-- Tapón/Cuentagotas --%3E%3Crect x='75' y='25' width='10' height='10' rx='1' fill='%23333'/%3E%3C!-- Sombra base --%3E%3Cellipse cx='50' cy='88' rx='45' ry='3' fill='rgba(0,0,0,0.1)'/%3E%3C/svg%3E");
}
.svg-aroma::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3C!-- DIFUSOR DE MADERA --%3E%3C!-- Cuerpo base del difusor --%3E%3Cpath d='M15 80 Q15 45 50 45 T85 80 Z' fill='%238D6E63'/%3E%3C!-- Parte inferior (base de madera oscura) --%3E%3Cpath d='M15 80 Q50 85 85 80 L85 85 Q50 90 15 85 Z' fill='%235D4037'/%3E%3C!-- Salida de vapor y detalle de luz --%3E%3Crect x='48' y='45' width='4' height='2' fill='%23D7CCC8'/%3E%3Cpath d='M47 35 Q50 25 53 35 T50 15' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' opacity='0.6'/%3E%3Cpath d='M42 38 Q45 32 48 38 T45 25' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' opacity='0.4'/%3E%3C!-- BOTELLA ÁMBAR --%3E%3C!-- Cuerpo botella --%3E%3Crect x='65' y='55' width='18' height='30' rx='2' fill='%236D4C41'/%3E%3C!-- Etiqueta --%3E%3Crect x='65' y='65' width='18' height='12' fill='%23F5F5F5' opacity='0.9'/%3E%3Crect x='68' y='68' width='12' height='1' fill='%238D6E63'/%3E%3C!-- Tapón negro --%3E%3Crect x='69' y='50' width='10' height='6' rx='1' fill='%23212121'/%3E%3C!-- Sombra en el suelo --%3E%3Cellipse cx='50' cy='88' rx='40' ry='3' fill='black' fill-opacity='0.1'/%3E%3C/svg%3E");
}
.svg-emprende::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3C!-- BOTELLA DE ACEITE ESENCIAL --%3E%3Cpath d='M50 15c-10 20-10 40-10 40h20s0-20-10-40z' fill='%236e4f3a' stroke='%234a3528' stroke-width='2'/%3E%3C!-- Tapón negro --%3E%3Crect x='45' y='10' width='10' height='6' rx='1' fill='%23212121'/%3E%3C!-- Gota de aceite estilizada --%3E%3Ccircle cx='50' cy='35' r='4' fill='%23ff793f'/%3E%3C!-- BILLETE (Detrás de la botella) --%3E%3Crect x='25' y='50' width='50' height='25' rx='2' fill='%23a5d6a7' stroke='%232e7d32' stroke-width='1.5'/%3E%3Ccircle cx='50' cy='62.5' r='6' fill='%2381c784'/%3E%3Ctext x='47' y='65' font-family='Arial, sans-serif' font-size='8' fill='%232e7d32' font-weight='bold'%3E$%3C/text%3E%3C!-- MONEDAS (Delante de la botella) --%3E%3C!-- Moneda dorada (derecha) --%3E%3Ccircle cx='65' cy='75' r='7' fill='%23ffd54f' stroke='%23ffb300' stroke-width='1.5'/%3E%3Ctext x='62' y='78' font-family='Arial, sans-serif' font-size='9' fill='%23ffb300' font-weight='bold'%3E$%3C/text%3E%3C!-- Moneda dorada (izquierda) --%3E%3Ccircle cx='35' cy='75' r='7' fill='%23ffd54f' stroke='%23ffb300' stroke-width='1.5'/%3E%3Ctext x='32' y='78' font-family='Arial, sans-serif' font-size='9' fill='%23ffb300' font-weight='bold'%3E$%3C/text%3E%3C!-- Pequeña moneda de cobre (centro inferior) --%3E%3Ccircle cx='50' cy='82' r='5' fill='%23ff8a65' stroke='%23e64a19' stroke-width='1'/%3E%3Ccircle cx='50' cy='82' r='2' fill='none' stroke='%23e64a19' stroke-width='0.5'/%3E%3C/svg%3E");
}


/* DETALLES */
.detalles {
    background-color: #ffffff89;
    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-white);
    font-weight: 500;
    background: linear-gradient(135deg, #8C2C88, #9f6aa0);
    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='white' stroke-width='4'/%3E%3Cline x1='50' y1='30' x2='50' y2='70' stroke='white' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='30' y1='50' x2='70' y2='50' stroke='white' 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='white' stroke-width='4'/%3E%3Cline x1='30' y1='50' x2='70' y2='50' stroke='white' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* CONTENIDO */
.detalles .wp-block-list {
    padding: 1rem 2rem;
    margin: 0;
    background-color: #bebbbb7c;
    animation: fadeIn .35s ease;
}
.detalles .wp-block-list li {
     line-height: 1.6!important;
}
    
.detalles .wp-block-list a {
    color: var(--color-black);
}

/* ANIMACIÓN */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}