/* ============================================================
   1. AVISO DE WOOCOMMERCE
   ============================================================ */
.woocommerce-store-notice,
p.demo_store,
.demo_store {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 15px !important;
}

.woocommerce-store-notice a,
p.demo_store a,
.demo_store a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: bold !important;
}


/* ============================================================
   2. PRECIOS Y BOTONES DE PRODUCTOS EN TIENDA
   ============================================================ */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price span.amount,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: #000000 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 1.1em !important;
}

.woocommerce ul.products li.product .price a,
.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
}

.woocommerce ul.products li.product .button,
.woocommerce a.button.add_to_cart_button {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: background-color 0.3s ease !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce a.button.add_to_cart_button:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}


/* ============================================================
   3. PÁGINA DEL CARRITO DE COMPRAS
   ============================================================ */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart a.checkout-button,
.woocommerce .cart .button,
.wc-block-cart__submit-button,
a.wc-block-components-button {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 24px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart a.checkout-button:hover,
a.wc-block-components-button:hover {
    background-color: #222222 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.25) !important;
}

.woocommerce-cart a.checkout-button *,
a.wc-block-components-button * {
    color: #ffffff !important;
    text-decoration: none !important;
}

.woocommerce-cart .cart_totals .order-total .amount,
.wc-block-components-totals-item__value {
    font-size: 1.3em !important;
    font-weight: 800 !important;
    color: #000000 !important;
}

.woocommerce-cart table.cart td.product-quantity input.qty,
.wc-block-cart-items__row input {
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}


/* ============================================================
   4. CHECKOUT / FINALIZAR COMPRA
   ============================================================ */
body.woocommerce-checkout button.button.alt,
body.woocommerce-checkout input.button.alt,
body.woocommerce-checkout #place_order,
.woocommerce-checkout .wc-block-checkout__submit-button,
button[name="woocommerce_checkout_place_order"],
.wc-block-components-button:not(.is-link) {
    background-color: #000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 24px !important;
    border-radius: 4px !important;
    border: none !important;
    width: 100% !important;
    opacity: 1 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

body.woocommerce-checkout button.button.alt:hover,
body.woocommerce-checkout input.button.alt:hover,
body.woocommerce-checkout #place_order:hover,
.woocommerce-checkout .wc-block-checkout__submit-button:hover,
button[name="woocommerce_checkout_place_order"]:hover,
.wc-block-components-button:not(.is-link):hover {
    background-color: #222222 !important;
    background: #222222 !important;
    color: #ffffff !important;
}


/* ============================================================
   5. PANEL "MI CUENTA"
   ============================================================ */
.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
}

.woocommerce-MyAccount-navigation {
    flex: 1 1 240px;
    max-width: 280px;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #000000 !important;
    border-radius: 0px !important;
    overflow: hidden;
}

.woocommerce-MyAccount-navigation ul li {
    list-style-type: none !important;
    margin: 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none !important;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: 14px 20px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.2s ease-in-out !important;
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.woocommerce-MyAccount-content {
    flex: 3 1 500px;
    background-color: #ffffff !important;
    padding: 30px !important;
    border: 1px solid #000000 !important;
    border-radius: 0px !important;
}

.woocommerce-MyAccount-content a {
    color: #000000 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

.woocommerce-MyAccount-content a:hover {
    color: #555555 !important;
}

.woocommerce-account .page-header,
.woocommerce-account .page-title-section {
    background-color: #000000 !important;
    padding: 50px 20px !important;
}

.woocommerce-account .page-header h1,
.woocommerce-account .page-title,
.woocommerce-account .entry-title {
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
}

.woocommerce-MyAccount-content p a {
    text-decoration: none !important;
    border-bottom: 2px solid #000000 !important;
    padding-bottom: 1px !important;
    transition: all 0.2s ease !important;
}

.woocommerce-MyAccount-content p a:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.woocommerce-MyAccount-content p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #222222 !important;
    margin-bottom: 18px !important;
}

.woocommerce-MyAccount-content::after {
    content: "💡 Cada interacción y adquisición en nuestra tienda apoya la autogestión de nuestras iniciativas culturales y educativas." !important;
    display: block !important;
    margin-top: 25px !important;
    padding: 15px 20px !important;
    background-color: #f5f5f5 !important;
    border-left: 3px solid #000000 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #333333 !important;
}


/* ============================================================
   6. PORTAL DE CLIENTES
   ============================================================ */
.page-id-clients .entry-content p:first-of-type,
body[class*="clients"] .entry-content p:first-of-type {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #000000 !important;
    margin-bottom: 20px !important;
}

.page-id-clients .entry-content::after,
body[class*="clients"] .entry-content::after {
    content: "💡 Si requieres asistencia para facturación electrónica o convenios institucionales, puedes contactarnos directamente." !important;
    display: block !important;
    margin-top: 30px !important;
    padding: 18px 22px !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #000000 !important;
    border-left: 4px solid #000000 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #111111 !important;
}

.entry-content ul li a[href*="clients"],
.entry-content div[class*="client"] ul li a,
.entry-content nav ul li a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 18px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    margin-bottom: 6px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

.entry-content ul li a[href*="clients"]:hover,
.entry-content div[class*="client"] ul li a:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.entry-content a {
    text-decoration: none !important;
}


/* ============================================================
   7. PÁGINA DE CONTACTO (FORMULARIO)
   ============================================================ */
.page-id-contacto .entry-content form,
body[class*="contacto"] form,
.wpcf7-form,
div.wpforms-container {
    background-color: #ffffff !important;
    padding: 30px !important;
    border: 1px solid #000000 !important;
    border-radius: 0px !important;
}

.page-id-contacto label,
body[class*="contacto"] label,
.wpcf7 label,
.wpforms-field-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #000000 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.page-id-contacto input[type="text"],
.page-id-contacto input[type="email"],
.page-id-contacto textarea,
body[class*="contacto"] input[type="text"],
body[class*="contacto"] input[type="email"],
body[class*="contacto"] textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    border: 1.5px solid #000000 !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border-radius: 0px !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
}

.page-id-contacto input:focus,
.page-id-contacto textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    border-color: #000000 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px #000000 !important;
}

.page-id-contacto input[type="submit"],
.page-id-contacto button[type="submit"],
body[class*="contacto"] input[type="submit"],
.wpcf7 input[type="submit"],
.wpforms-submit {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 14px 28px !important;
    border-radius: 4px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-block !important;
    margin-top: 15px !important;
}

.page-id-contacto input[type="submit"]:hover,
.page-id-contacto button[type="submit"]:hover,
body[class*="contacto"] input[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover,
.wpforms-submit:hover {
    background-color: #222222 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}
/* ============================================================
   8. MENÚ DE NAVEGACIÓN (HEADER) - UNA FILA Y MÁXIMO CONTRASTE
   ============================================================ */

/* Solo para escritorio (pantallas grandes) */
@media screen and (min-width: 769px) {

    /* 1. Ajuste compacto para mantener TODOS los elementos en UNA SOLA FILA */
    .main-navigation a, 
    .site-header .main-navigation ul li a,
    #site-navigation a {
        font-size: 13px !important;
        font-weight: 400 !important; /* Normal en tono ligero */
        color: #666666 !important;   /* Gris para dar contraste */
        padding-left: 4px !important; /* Espaciado compacto anti-salto */
        padding-right: 4px !important;
        letter-spacing: -0.3px !important;
    }

    /* 2. LOS 3 ÍTEMS DESTACADOS (Tienda, Cursos, Trabajos) - MÁXIMO GROSOR Y NEGRO PURO */
    #site-navigation a[href*="tienda"],
    #site-navigation a[href*="shop"],
    .main-navigation a[href*="tienda"],
    .main-navigation a[href*="shop"],
    #site-navigation a[href*="cursos"],
    #site-navigation a[href*="curso"],
    .main-navigation a[href*="cursos"],
    .main-navigation a[href*="curso"],
    #site-navigation a[href*="trabajos"],
    #site-navigation a[href*="trabajo"],
    .main-navigation a[href*="trabajos"],
    .main-navigation a[href*="trabajo"] {
        font-weight: 900 !important; /* Negrita extra fuerte */
        color: #000000 !important;   /* Negro absoluto */
        font-size: 13.5px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    #site-navigation a:hover, 
    .main-navigation a:hover {
        color: #000000 !important;
    }
}

/* En celulares (Móvil): Solo destacamos los 3 ítems sin tocar la estructura nativa */
@media screen and (max-width: 768px) {
    .main-navigation a[href*="tienda"],
    .main-navigation a[href*="cursos"],
    .main-navigation a[href*="trabajos"] {
        font-weight: 900 !important;
        color: #000000 !important;
    }
}
/* ============================================================
   9. RESPONSIVIDAD MÓVIL Y FLUIDEZ DE TEXTOS (SIN CORTES)
   ============================================================ */

@media screen and (max-width: 768px) {

    /* 1. Evitar que las palabras se partan con guiones o saltos abruptos */
    body, p, h1, h2, h3, h4, h5, h6, a, span, li {
        hyphens: none !important;
        -webkit-hyphens: none !important;
        -ms-hyphens: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* 2. Ajuste fluido de títulos principales para que no se desborden */
    h1, .entry-title, .page-title {
        font-size: clamp(22px, 6vw, 32px) !important;
        line-height: 1.25 !important;
        letter-spacing: -0.5px !important;
    }

    h2 {
        font-size: clamp(18px, 5vw, 24px) !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: clamp(16px, 4.5vw, 20px) !important;
        line-height: 1.35 !important;
    }

    /* 3. Parrafos y textos generales cómodos de leer */
    p, li, span {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* 4. Evitar desbordamientos horizontales en pantallas estrechas */
    .site-content, 
    .content-area, 
    main, 
    article, 
    .entry-content {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* 5. Adaptar imágenes y medios al ancho de la pantalla */
    img, iframe, video, figure {
        max-width: 100% !important;
        height: auto !important;
    }
}