/* ============================================
   WebziIA - Estilos para páginas internas con shortcodes
   assets/css/webziia-packages.css
   ------------------------------------------------
   Clases de ayuda para cuando Pablo pega un shortcode de paquetes
   ([webziia_paquetes_clasicos], [webziia_paquetes_marketing], etc.)
   dentro de una página o post normal de WordPress y quiere un título
   o tarjetas con la identidad de marca alrededor.

   OJO: NO se importa la fuente "Brother Bold" desde fonts.cdnfonts.com
   como en la plantilla original — el plugin ya trae la fuente real
   auto-hospedada (assets/fonts/BROTHER-Bold.ttf, cargada por
   variables.css como --fuente-titulos) y ya se aplica en todo el sitio.
   Cargar una segunda copia desde un CDN externo no oficial solo
   añadiría una petición de red de más y un posible desajuste con la
   tipografía que ya ves en el resto de la web.
   Este archivo reutiliza esas MISMAS variables de marca en vez de
   redefinir colores nuevos, para que todo se vea consistente.
   ============================================ */

.webziia-shortcode-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.webziia-shortcode-wrapper .webziia-title,
.webziia-title {
    font-family: var(--fuente-titulos), sans-serif;
    color: var(--verde-principal);
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 12px;
}

.webziia-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--dorado-acento);
    margin: 12px auto 28px;
    border-radius: 4px;
}

.webziia-gold-text {
    color: var(--verde-oscuro);
    background: var(--dorado-acento);
    padding: 2px 8px;
    border-radius: 6px;
}

.webziia-btn-primary,
.webziia-btn-gold {
    display: inline-block;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-family: var(--fuente-titulos), sans-serif;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.webziia-btn-primary {
    background: var(--verde-principal);
    color: var(--blanco, #FFFFFF);
}
.webziia-btn-primary:hover {
    background: var(--verde-oscuro);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 61, 27, 0.3);
}

.webziia-btn-gold {
    background: var(--dorado-acento);
    color: var(--verde-oscuro);
}
.webziia-btn-gold:hover {
    background: #e6c98a;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(241, 220, 164, 0.4);
}

.webziia-card {
    background: var(--blanco, #FFFFFF);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 24px;
    border-left: 4px solid var(--verde-principal);
}

.webziia-package-card {
    background: var(--blanco, #FFFFFF);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    padding: 30px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.webziia-package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 61, 27, 0.15);
    border-color: var(--dorado-acento);
}
.webziia-package-card.premium {
    border-color: var(--dorado-acento);
    background: linear-gradient(135deg, #ffffff 0%, #fefcf5 100%);
}
.webziia-package-card .price {
    font-family: var(--fuente-titulos), sans-serif;
    font-size: 2.5rem;
    color: var(--verde-principal);
}
.webziia-package-card .price-small {
    font-family: var(--fuente-titulos), sans-serif;
    font-size: 1.5rem;
    color: var(--verde-oscuro);
}
.webziia-package-card .features {
    list-style: none;
    padding: 0;
}
.webziia-package-card .features li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.webziia-package-card .features li::before {
    content: "✅";
    color: var(--verde-principal);
}

.webziia-badge {
    background: var(--dorado-acento);
    color: var(--verde-oscuro);
    padding: 4px 12px;
    border-radius: 20px;
    font-family: var(--fuente-titulos), sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    display: inline-block;
}

@media (max-width: 768px) {
    .webziia-shortcode-wrapper {
        padding: 20px 12px;
    }
    .webziia-shortcode-wrapper .webziia-title,
    .webziia-title {
        font-size: 1.6rem;
    }
}