/**
 * CMS AI Product Generator — frontend.css
 * Version: 1.8.5
 * Colores: primario #7a1157 | secundario #D32F2F | suave #e8d0e0
 */

/* ── Variables ──────────────────────────────────────────────────── */
:root {
    --c-primary:      #7a1157;
    --c-primary-dk:   #5c0d41;
    --c-primary-lt:   #f3e6f0;
    --c-primary-xlt:  #faf2f8;
    --c-secondary:    #D32F2F;
    --c-soft:         #e8d0e0;
    --c-text:         #1a1a2e;
    --c-text-light:   #4a4a6a;
    --c-border:       #e4cfe0;
    --c-radius:       12px;
    --c-radius-lg:    16px;
    --c-shadow:       0 2px 16px rgba(122,17,87,0.10);
    --c-shadow-md:    0 4px 24px rgba(122,17,87,0.15);
    --c-shadow-hover: 0 8px 36px rgba(122,17,87,0.20);
    --c-grad:         linear-gradient(135deg, #faf2f8 0%, #ffffff 60%);
    --c-grad-rev:     linear-gradient(135deg, #ffffff 0%, #faf2f8 60%);
    --c-grad-header:  linear-gradient(135deg, #7a1157 0%, #a3196f 100%);
}

/* ════════════════════════════════════════════════════════════════
   ANCHO COMPLETO — Igualar al header
   Apuntar a los contenedores del tab de descripción de WooCommerce
════════════════════════════════════════════════════════════════ */
.woocommerce-tabs,
.woocommerce-tabs .woocommerce-Tabs-panel,
.woocommerce-tabs #tab-description,
.woocommerce div.product .woocommerce-tabs {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* Reducir margen excesivo entre header y contenido del producto */
.woocommerce div.product,
.woocommerce-page div.product {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.woocommerce .woocommerce-breadcrumb {
    margin-bottom: 10px !important;
}

/* ════════════════════════════════════════════════════════════════
   TEXTO JUSTIFICADO — máxima cobertura, descripción corta incluida
════════════════════════════════════════════════════════════════ */

/* Descripción corta */
.woocommerce-product-details__short-description p,
.woocommerce-product-details__short-description li,
.entry-summary .woocommerce-product-details__short-description p,
div.product .short-description p,
.short-description p {
    text-align: justify !important;
}

/* Pestaña descripción larga — todos los selectores posibles */
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li,
#tab-description p,
#tab-description li,
.wc-tab p,
.wc-tab li,
[class*="tab-description"] p,
[id*="tab-description"] p,
[id*="tab-description"] li,
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li,
.cms-product-content p,
.cms-product-content li,
.cms-gallery-text p,
.cms-gallery-text li,
.cms-faq-answer p {
    text-align: justify !important;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ════════════════════════════════════════════════════════════════
   CONTENIDO GENERAL
════════════════════════════════════════════════════════════════ */
.cms-product-content {
    margin-bottom: 24px;
    line-height: 1.75;
    color: var(--c-text);
}
.cms-product-content h2,
.cms-gallery-text h2,
#tab-description h2,
.woocommerce-Tabs-panel--description h2 {
    font-size: 1.4em !important;
    font-weight: 700 !important;
    color: var(--c-primary) !important;
    margin: 0 0 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--c-soft) !important;
    position: relative !important;
}
.cms-product-content h2::after,
.cms-gallery-text h2::after,
#tab-description h2::after,
.woocommerce-Tabs-panel--description h2::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px; left: 0 !important;
    width: 44px; height: 2px !important;
    background: var(--c-secondary) !important;
    border-radius: 2px !important;
}
.cms-product-content h3,
.cms-gallery-text h3 {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--c-primary-dk);
    margin: 12px 0 6px;
}
.cms-product-content ul,
.cms-product-content ol,
.cms-gallery-text ul,
.cms-gallery-text ol {
    padding-left: 20px;
    line-height: 1.75;
    color: var(--c-text-light);
    margin-bottom: 12px;
}
.cms-product-content ul li::marker,
.cms-gallery-text ul li::marker { color: var(--c-secondary); }
.cms-product-content strong,
.cms-gallery-text strong { color: var(--c-primary-dk); }

/* ════════════════════════════════════════════════════════════════
   TABLA DE ESPECIFICACIONES
════════════════════════════════════════════════════════════════ */
.cms-specs-wrapper { margin: 24px 0; }
.cms-specs-wrapper h2 {
    font-size: 1.4em; font-weight: 700;
    color: var(--c-primary); margin-bottom: 14px;
    padding-bottom: 8px; border-bottom: 2px solid var(--c-soft);
    position: relative;
}
.cms-specs-wrapper h2::after {
    content: ''; position: absolute;
    bottom: -2px; left: 0; width: 44px; height: 2px;
    background: var(--c-secondary); border-radius: 2px;
}
.cms-specs-table {
    width: 100% !important;
    border-collapse: separate !important; border-spacing: 0;
    border-radius: var(--c-radius); overflow: hidden;
    box-shadow: var(--c-shadow); font-size: 0.93em;
}
.cms-specs-table thead tr { background: var(--c-grad-header) !important; }
.cms-specs-table thead th {
    padding: 13px 18px !important; font-weight: 700 !important;
    text-align: left !important; color: #fff !important;
    font-size: 0.83em !important; text-transform: uppercase; letter-spacing: 0.5px;
}
.cms-specs-table tbody tr { background: #fff; border-bottom: 1px solid var(--c-border); transition: background 0.15s; }
.cms-specs-table tbody tr:nth-child(even) { background: var(--c-primary-xlt); }
.cms-specs-table tbody tr:hover { background: var(--c-primary-lt) !important; }
.cms-specs-table tbody td {
    padding: 11px 18px !important; color: var(--c-text-light);
    line-height: 1.5; vertical-align: middle;
    text-align: left !important; /* no justify en tabla */
}
.cms-specs-table tbody td:first-child {
    font-weight: 700 !important; color: var(--c-text) !important;
    width: 42%; border-right: 1px solid var(--c-border);
}
@media (max-width: 600px) {
    .cms-specs-table tbody td { padding: 9px 11px !important; font-size: 0.86em !important; }
}

/* ════════════════════════════════════════════════════════════════
   FAQ ACORDEÓN
════════════════════════════════════════════════════════════════ */
.cms-faq-section { margin: 28px 0; }
.cms-faq-section > h2 {
    font-size: 1.4em; font-weight: 700; color: var(--c-primary);
    margin-bottom: 18px; padding-bottom: 8px;
    border-bottom: 2px solid var(--c-soft); position: relative;
}
.cms-faq-section > h2::after {
    content: ''; position: absolute; bottom: -2px; left: 0;
    width: 44px; height: 2px; background: var(--c-secondary); border-radius: 2px;
}
.cms-faq-item {
    border: 1px solid var(--c-border); border-radius: 6px;
    margin-bottom: 7px; overflow: hidden;
    box-shadow: 0 1px 4px rgba(122,17,87,0.07); transition: box-shadow 0.2s;
}
.cms-faq-item:hover { box-shadow: 0 3px 12px rgba(122,17,87,0.13); }
.cms-faq-question {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; gap: 12px;
    padding: 14px 18px; background: #fff;
    cursor: pointer; user-select: none; transition: background 0.18s;
}
.cms-faq-question:hover { background: var(--c-primary-xlt) !important; }
.cms-faq-item.active .cms-faq-question { background: var(--c-grad-header) !important; color: #fff !important; }
.cms-faq-icon {
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important;
    width: 27px; height: 27px; min-width: 27px; border-radius: 50%;
    background: var(--c-secondary); color: #fff !important;
    font-weight: 900; font-size: 14px; flex-shrink: 0;
}
.cms-faq-question-text {
    flex: 1; font-weight: 600; font-size: 0.88em;
    text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.4;
    text-align: left !important; /* no justify en FAQ header */
}
.cms-faq-toggle {
    font-size: 22px; color: var(--c-primary);
    transition: transform 0.25s, color 0.2s; flex-shrink: 0; line-height: 1;
}
.cms-faq-item.active .cms-faq-toggle { transform: rotate(45deg); color: #fff !important; }
.cms-faq-answer {
    display: none; padding: 15px 20px;
    background: var(--c-primary-xlt);
    border-top: 2px solid var(--c-soft);
    line-height: 1.75; color: var(--c-text-light);
}
.cms-faq-answer p { margin: 0 0 8px; }
.cms-faq-answer p:last-child { margin-bottom: 0; }
.cms-faq-item.active .cms-faq-answer { display: block !important; animation: cmsFaqOpen 0.2s ease; }
@keyframes cmsFaqOpen {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   BLOQUES IMAGEN + TEXTO — DESKTOP
   object-fit: contain → imagen completa siempre, sin recorte
════════════════════════════════════════════════════════════════ */
.cms-gallery-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    margin-bottom: 20px !important;
    border-radius: var(--c-radius-lg);
    box-shadow: var(--c-shadow);
    border: 1px solid var(--c-border);
    overflow: hidden;
    background: var(--c-grad);
    transition: box-shadow 0.25s, transform 0.25s;
    min-height: 240px;
}
.cms-gallery-block:hover {
    box-shadow: var(--c-shadow-hover);
    transform: translateY(-2px);
}

/* Par (0,2,4...): texto izquierda, imagen derecha */
.cms-gallery-block .cms-gallery-text { order: 1; }
.cms-gallery-block .cms-gallery-img  { order: 2; }

/* Impar (1,3,5...): imagen izquierda, texto derecha */
.cms-gallery-block.cms-gallery-reverse { background: var(--c-grad-rev); }
.cms-gallery-block.cms-gallery-reverse .cms-gallery-img  { order: 1; }
.cms-gallery-block.cms-gallery-reverse .cms-gallery-text { order: 2; }

/* Columna imagen: 40% — contain para mostrar imagen completa */
.cms-gallery-img {
    width: 40% !important;
    flex-shrink: 0;
    background-color: var(--c-primary-xlt);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}
.cms-gallery-img img {
    width: 100% !important;
    height: auto !important;
    max-height: 420px;
    object-fit: contain !important;  /* ← CONTAIN: imagen completa, sin recorte */
    display: block !important;
    transition: transform 0.35s ease;
}
.cms-gallery-block:hover .cms-gallery-img img { transform: scale(1.04); }

/* Columna texto: 60% */
.cms-gallery-text {
    width: 60% !important;
    padding: 26px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box;
}
.cms-gallery-text > * { width: 91%; }  /* evita que el texto llegue al borde de la imagen */
.cms-gallery-text {
    text-align: justify !important;
}
.cms-gallery-text p {
    line-height: 1.78 !important; color: var(--c-text-light) !important;
    margin-bottom: 10px !important; font-size: 0.97em !important;
}

/* ════════════════════════════════════════════════════════════════
   MÓVIL
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cms-gallery-block,
    .cms-gallery-block.cms-gallery-reverse {
        flex-direction: column !important;
        border-radius: var(--c-radius) !important;
        min-height: unset !important;
    }
    .cms-gallery-block .cms-gallery-img,
    .cms-gallery-block.cms-gallery-reverse .cms-gallery-img {
        order: 1 !important;
        width: 100% !important;
        padding: 16px 16px 8px !important;
        min-height: 160px;
    }
    .cms-gallery-block .cms-gallery-text,
    .cms-gallery-block.cms-gallery-reverse .cms-gallery-text {
        order: 2 !important;
        width: 100% !important;
        padding: 16px !important;
    }
    .cms-gallery-img img {
        max-height: 380px !important;
        object-fit: contain !important;
    }
    .cms-gallery-block:hover { transform: none; }
}

@media (max-width: 480px) {
    .cms-gallery-text { padding: 14px 12px !important; }
    .cms-gallery-text h2 { font-size: 1.1em !important; }
    .cms-gallery-text p  { font-size: 0.92em !important; }
    .cms-gallery-img img { max-height: 280px !important; }
}

/* ════════════════════════════════════════════════════════════════
   VÍDEO
════════════════════════════════════════════════════════════════ */
.cms-product-video { margin: 32px 0; }
.cms-product-video h3 {
    font-size: 1.2em; font-weight: 700; color: var(--c-primary);
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.cms-product-video h3::before {
    content: '\25B6';
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: var(--c-secondary); color: #fff;
    border-radius: 50%; font-size: 11px; flex-shrink: 0;
}
.cms-video-wrapper {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
    border-radius: var(--c-radius); box-shadow: var(--c-shadow-md);
}
.cms-video-wrapper iframe,
.cms-video-wrapper video {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; border: none;
}

/* ════════════════════════════════════════════════════════════════
   PRODUCTOS RELACIONADOS — estilo de cajas corporativo
   Igual que las gallery blocks: sombra, colores primarios, atractivo
════════════════════════════════════════════════════════════════ */
.related.products {
    margin-top: 40px !important;
}
.related.products h2,
.upsells.products h2 {
    font-size: 1.6em !important;
    font-weight: 700 !important;
    color: var(--c-primary) !important;
    margin-bottom: 24px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--c-soft) !important;
    position: relative !important;
}
.related.products h2::after,
.upsells.products h2::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px; left: 0 !important;
    width: 56px; height: 2px !important;
    background: var(--c-secondary) !important;
    border-radius: 2px !important;
}

/* Grid de productos relacionados */
.related.products ul.products,
.upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    float: none !important;
}

/* Cada tarjeta */
.related.products ul.products li.product,
.upsells.products ul.products li.product {
    background: #ffffff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    overflow: hidden !important;
    transition: box-shadow 0.25s, transform 0.25s !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
}
.related.products ul.products li.product:hover,
.upsells.products ul.products li.product:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    transform: translateY(-3px) !important;
}

/* Imagen — mismas reglas desktop y móvil, sin trucos de padding */
/* Contenedor cuadrado para la imagen */
.related.products ul.products li.product a.woocommerce-loop-product__link,
.upsells.products ul.products li.product a.woocommerce-loop-product__link {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    padding-bottom: 100% !important;
    overflow: hidden !important;
    background: #f9f9f9 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}
.related.products ul.products li.product a img,
.upsells.products ul.products li.product a img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease !important;
}
.related.products ul.products li.product:hover a img,
.upsells.products ul.products li.product:hover a img {
    transform: scale(1.04) !important;
}

/* Título */
.related.products ul.products li.product .woocommerce-loop-product__title,
.upsells.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.92em !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    padding: 12px 14px 4px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    text-align: left !important;
}

/* Precio */
.related.products ul.products li.product .price,
.upsells.products ul.products li.product .price {
    color: var(--c-primary) !important;
    font-size: 1.05em !important;
    font-weight: 700 !important;
    padding: 4px 14px 10px !important;
    display: block !important;
    text-align: left !important;
}
.related.products ul.products li.product .price del,
.upsells.products ul.products li.product .price del {
    color: #aaa !important; font-size: 0.85em !important; margin-right: 6px !important;
}
.related.products ul.products li.product .price ins,
.upsells.products ul.products li.product .price ins {
    text-decoration: none !important; color: var(--c-secondary) !important;
}

/* Ocultar categoría y SKU */
.related.products ul.products li.product .ast-woo-product-category,
.related.products ul.products li.product .woocommerce-loop-category__title,
.related.products ul.products li.product .product-category,
.upsells.products ul.products li.product .ast-woo-product-category,
.upsells.products ul.products li.product .woocommerce-loop-category__title,
.related.products ul.products li.product .sku-wrapper,
.upsells.products ul.products li.product .sku-wrapper {
    display: none !important;
}

/* Botón Ver producto */
.related.products ul.products li.product .button,
.upsells.products ul.products li.product .button,
.related.products ul.products li.product .cms-related-btn,
.upsells.products ul.products li.product .cms-related-btn {
    display: block !important;
    margin: auto 14px 14px !important;
    padding: 12px 14px !important;
    background: #e53935 !important;
    color: #fff !important;
    border-radius: 6px !important;
    text-align: center !important;
    font-size: 0.9em !important;
    font-weight: 700 !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    text-decoration: none !important;
    width: calc(100% - 28px) !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}
.related.products ul.products li.product .button:hover,
.upsells.products ul.products li.product .button:hover {
    background: #c62828 !important;
    color: #fff !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .related.products ul.products,
    .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}

@media (max-width: 600px) {
    .related.products ul.products,
    .upsells.products ul.products {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .related.products ul.products li.product .woocommerce-loop-product__title,
    .upsells.products ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.9em !important;
        padding: 12px 14px 4px !important;
    }
    .related.products ul.products li.product .price,
    .upsells.products ul.products li.product .price {
        font-size: 1em !important;
    }
}

/* ── Botón Ver producto relacionados (forzado via PHP) ────────── */
.cms-related-btn {
    display: block !important;
    margin: auto 16px 16px !important;
    padding: 13px 16px !important;
    background: #e53935 !important;
    color: #fff !important;
    border-radius: 6px !important;
    text-align: center !important;
    font-size: 0.92em !important;
    font-weight: 700 !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
    transition: background 0.2s !important;
}
.cms-related-btn:hover {
    background: #c62828 !important;
    color: #fff !important;
}

/* Ocultar botón nativo de WooCommerce en relacionados y mostrar solo el nuestro */
.related.products .cms-related-forced ~ .button:not(.cms-related-btn),
.upsells.products .cms-related-forced ~ .button:not(.cms-related-btn) {
    display: none !important;
}
/* El botón forzado solo visible en relacionados */
.cms-related-forced {
    display: block !important;
    margin: auto 16px 16px !important;
    padding: 13px 16px !important;
    background: #e53935 !important;
    color: #fff !important;
    border-radius: 6px !important;
    text-align: center !important;
    font-size: 0.92em !important;
    font-weight: 700 !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
}