/* Grupo Hidrovital App */
.hidrovital-app {
    scroll-behavior: smooth;
    width: 100%;
}

.hidrovital-app * {
    box-sizing: border-box;
}

.hidrovital-app ::-webkit-scrollbar { width: 8px; }
.hidrovital-app ::-webkit-scrollbar-track { background: #f1f5f9; }
.hidrovital-app ::-webkit-scrollbar-thumb { background: #0284c7; border-radius: 4px; }
.hidrovital-app ::-webkit-scrollbar-thumb:hover { background: #0369a1; }

.hidrovital-app .hero-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0369a1 100%);
}

/* Helps the app use the full available page width inside most themes. */
.entry-content .hidrovital-app,
.wp-block-post-content .hidrovital-app {
    max-width: none;
}

.entry-content:has(.hidrovital-app),
.wp-block-post-content:has(.hidrovital-app) {
    max-width: none;
}

.hidrovital-app .line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.hidrovital-app .line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hidrovital-wc-catalog .woocommerce-notices-wrapper,
.hidrovital-wc-catalog .woocommerce-message,
.hidrovital-wc-catalog .woocommerce-error,
.hidrovital-wc-catalog .woocommerce-info{margin-bottom:1rem;border-radius:1rem}
.hidrovital-wc-catalog .added_to_cart{font-size:12px;font-weight:800;color:#0284c7;margin-left:.75rem}

/* Grupo Hidrovital WooCommerce cart */
.hidrovital-wc-cart .quantity input.qty {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    min-height: 2.75rem;
    background: #fff;
    color: #0f172a;
}
.hidrovital-wc-cart .quantity input.qty:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, .15);
}
.hidrovital-wc-cart .woocommerce-remove-coupon {
    margin-left: .35rem;
    color: #ef4444;
    font-weight: 800;
    text-decoration: none;
}
.hidrovital-wc-cart .woocommerce-Price-amount {
    font-weight: 900;
}

/* Product quick-view modal performance and button colors
   Change these two variables to customize the modal primary button background. */
.hidrovital-wc-catalog {
    --ghv-modal-button-bg: #0f172a;
    --ghv-modal-button-hover-bg: #1e293b;
}
.hidrovital-wc-catalog .ghv-product-modal-panel {
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}
.hidrovital-wc-catalog .ghv-btn-primary {
    background: var(--ghv-modal-button-bg);
}
.hidrovital-wc-catalog .ghv-btn-primary:hover {
    background: var(--ghv-modal-button-hover-bg);
}

.hidrovital-wc-catalog .ghv-catalog-add-button,
.hidrovital-wc-catalog .ghv-catalog-add-button:visited {
    background: #0f172a;
    color: #ffffff;
    text-decoration: none;
}
.hidrovital-wc-catalog .ghv-catalog-add-button:hover,
.hidrovital-wc-catalog .ghv-catalog-add-button:focus {
    background: #1e293b;
    color: #ffffff;
}

/* Category accordion in WooCommerce catalog sidebar */
.hidrovital-wc-catalog .ghv-cat-summary::-webkit-details-marker {
    display: none;
}
.hidrovital-wc-catalog .ghv-cat-summary::marker {
    content: '';
}
.hidrovital-wc-catalog details[open] > .ghv-cat-summary .ghv-cat-chevron {
    transform: rotate(180deg);
}
.hidrovital-wc-catalog .ghv-cat-chevron {
    display: inline-flex;
    transition: transform .15s ease;
}

/* ============================================================
   ANCHO COMPLETO (full-bleed)
   Rompe el contenedor "encajonado" del tema (GeneratePress
   separate-containers, etc.) para que las bandas de color
   vayan de borde a borde. El contenido interno mantiene su
   max-w-7xl mx-auto y sigue centrado y legible.
   ============================================================ */
.hidrovital-app--fullwidth {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Refuerza el override en temas que limitan el ancho del contenido */
.entry-content > .hidrovital-app--fullwidth,
.wp-block-post-content > .hidrovital-app--fullwidth {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Cuando el contenedor ya es full-width, ghv-fullbleed NO debe
   volver a romper (evita doble breakout); solo asegura 100%. */
.hidrovital-app--fullwidth .ghv-fullbleed {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* ghv-fullbleed por sí solo (si se usa fuera de un contenedor
   full-width) hace su propio breakout a ancho de viewport. */
.ghv-fullbleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ============================================================
   MARQUEE "Empresas que confían en nosotros"
   La lista se imprime duplicada en el HTML; al desplazar
   -50% el bucle es continuo y sin saltos.
   ============================================================ */
@keyframes ghv-marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ghv-marquee {
    animation: ghv-marquee-scroll 60s linear infinite;
    will-change: transform;
}
.ghv-marquee:hover {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .ghv-marquee {
        animation: none;
        flex-wrap: wrap;
        white-space: normal;
        justify-content: center;
    }
}