/*
 * Prodeso Shop — custom-main.css
 *
 * Misma convención que simmtech-child_theme: cada shortcode de página
 * trae su bloque de estilos con scope ".vc-page-<slug>", más un puñado
 * de clases base compartidas (.vc-container, .vc-btn) sin scope.
 *
 * Tokens de marca reales (paleta de _raw/brand/, ver CLAUDE.md
 * "Identidad de marca"). Cambiar aquí re-colorea toda la portada.
 */
:root {
    --pds-ink:        #252C3B;   /* navy — texto oscuro, franjas oscuras */
    --pds-ink-soft:   #5b6675;   /* texto secundario */
    --pds-primary:    #00388B;   /* azul de marca — CTAs oscuros, links */
    --pds-accent:     #4285FE;   /* azul cielo — botón principal, hover */
    --pds-accent-ink: #ffffff;
    --pds-surface:    #ffffff;
    --pds-bg-alt:     #f4f6f9;   /* fondo de secciones alternas */
    --pds-border:     #e2e7ee;
    --pds-radius:     10px;
    --pds-maxw:       1240px;
}

/* =========================================================================
 * BASE COMPARTIDA (sin scope)
 * ========================================================================= */
.vc-container {
    max-width: var(--pds-maxw);
    margin-inline: auto;
    padding-inline: 24px;
}

.vc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--pds-radius);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.vc-btn:hover { transform: translateY(-1px); }

.vc-btn-primary { background: var(--pds-accent); color: var(--pds-accent-ink); }
.vc-btn-primary:hover { background: color-mix(in srgb, var(--pds-accent) 88%, #000); }

.vc-btn-white { background: #fff; color: var(--pds-primary); }
.vc-btn-white:hover { background: #eef2fb; }

.vc-btn-ghost { background: transparent; color: var(--pds-ink); border-color: var(--pds-border); }
.vc-btn-ghost:hover { border-color: var(--pds-ink); }

/* =========================================================================
 * PÁGINA: HOME  (.vc-page-home)
 * Estructura y copy: ver _raw/pages/home.html (mockup aprobado) y
 * _raw/brand/ADN-PRODESO-SHOP.md (posicionamiento / tono).
 * ========================================================================= */
.vc-page-home { color: var(--pds-ink); }
.vc-page-home .vc-sec { padding-block: clamp(40px, 6vw, 72px); }
.vc-page-home .vc-sec--alt { background: var(--pds-bg-alt); }

.vc-page-home .vc-h2,
.vc-page-home .vc-display-h1 { font-family: Manrope, Inter, sans-serif; }

.vc-page-home .vc-h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
}
.vc-page-home .vc-muted { color: var(--pds-ink-soft); }

.vc-page-home .vc-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.vc-page-home .vc-link {
    color: var(--pds-primary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* ---- Hero ---- */
.vc-page-home .vc-hero {
    background: linear-gradient(120deg, #0a2a63, var(--pds-primary) 55%, #0d4bb0);
    color: #fff;
}
.vc-page-home .vc-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 30px;
    align-items: center;
    padding-block: clamp(40px, 6vw, 64px);
}
.vc-page-home .vc-hero__copy { max-width: 560px; }
.vc-page-home .vc-hero .vc-eyebrow { color: #9fc0ff; }
.vc-page-home .vc-hero .vc-display-h1 { text-wrap: balance; }
.vc-page-home .vc-hero .vc-lead { color: #d7e4ff; }
.vc-page-home .vc-hero__art {
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #ffffff22;
    background:
        radial-gradient(120% 120% at 70% 20%, #4285FE55, transparent 60%),
        linear-gradient(160deg, #0b2f70, #123f8f);
}
.vc-page-home .vc-hero__art iframe { display: block; }

/* ---- Barra de confianza ---- */
.vc-page-home .vc-trust { padding-block: clamp(24px, 4vw, 32px); border-bottom: 1px solid var(--pds-border); }
.vc-page-home .vc-trust__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.vc-page-home .vc-trust__item { display: flex; flex-direction: column; gap: 2px; }
.vc-page-home .vc-trust__item strong { font-size: .92rem; }
.vc-page-home .vc-trust__item span { color: var(--pds-ink-soft); font-size: .82rem; }

/* ---- Tiles de categoría ----
 * Sin fotos de categoría todavía: gradiente de marca en vez de imagen.
 * Cuando haya fotos reales en assets/img/, cambiar el background por
 * background-image y mantener el overlay para que el texto siga legible. */
.vc-page-home .vc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vc-page-home .vc-tile {
    aspect-ratio: 16 / 10;
    border-radius: var(--pds-radius);
    display: flex;
    align-items: flex-end;
    padding: 16px;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    background: linear-gradient(180deg, #1b3d7a55, #0a1f47 90%);
    transition: transform .15s ease;
}
.vc-page-home .vc-tile:hover { transform: translateY(-2px); }
.vc-page-home .vc-tile:nth-child(2) { background: linear-gradient(180deg, #2a5bbf55, #0a1f47 90%); }
.vc-page-home .vc-tile:nth-child(3) { background: linear-gradient(180deg, #12376f55, #0a1f47 90%); }
.vc-page-home .vc-tile:nth-child(4) { background: linear-gradient(180deg, #3f74d955, #0a1f47 90%); }

/* ---- Franja B2B (mayoreo / cuenta de negocio) ---- */
.vc-page-home .vc-b2b {
    background: var(--pds-ink);
    color: #fff;
    border-radius: 14px;
    padding: 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.vc-page-home .vc-b2b .vc-h2 { color: #fff; }
.vc-page-home .vc-b2b .vc-lead { color: #c2cad6; max-width: 520px; margin-top: 6px; }
.vc-page-home .vc-b2b__badges { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.vc-page-home .vc-b2b__badges span {
    background: #ffffff14;
    border: 1px solid #ffffff22;
    color: #fff;
    font-size: .75rem;
    padding: 5px 10px;
    border-radius: 6px;
}

/* ---- Carrusel de producto ----
 * Envuelve el [products] nativo de WooCommerce/Kadence — no se reinventa
 * la tarjeta de producto, solo se fuerza el listado a scroll horizontal. */
.vc-page-home .vc-carousel { position: relative; }
.vc-page-home .vc-carousel__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.vc-page-home .vc-carousel__track::-webkit-scrollbar { display: none; }
.vc-page-home .vc-carousel__track ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px;
    margin: 0 !important;
    padding: 2px 2px 10px !important;
}
.vc-page-home .vc-carousel__track ul.products li.product {
    width: 220px !important;
    flex: 0 0 220px !important;
    scroll-snap-align: start;
}
.vc-page-home .vc-carousel__btn {
    position: absolute;
    top: 38%;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--pds-border);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--pds-primary);
}
.vc-page-home .vc-carousel__btn--prev { left: -14px; }
.vc-page-home .vc-carousel__btn--next { right: -14px; }

/* ---- CTA de asesoría (Ruta B del ADN) ---- */
.vc-page-home .vc-cta-dark {
    background: linear-gradient(120deg, var(--pds-primary), #0d4bb0);
    color: #fff;
    border-radius: 14px;
    padding: 40px;
    text-align: center;
}
.vc-page-home .vc-cta-dark .vc-h2 { color: #fff; margin-bottom: 8px; }
.vc-page-home .vc-cta-dark .vc-lead { color: #d7e4ff; margin-inline: auto; margin-bottom: 20px; max-width: 520px; }

/* ---- Cómo funciona ---- */
.vc-page-home .vc-steps-sec { background: var(--pds-ink); color: #fff; }
.vc-page-home .vc-steps-sec .vc-h2 { color: #fff; }
.vc-page-home .vc-steps__list {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.vc-page-home .vc-steps__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #e2e8f0;
}
.vc-page-home .vc-steps__n {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pds-accent);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
}

/* =========================================================================
 * RESPONSIVE
 * ========================================================================= */
@media (max-width: 900px) {
    .vc-page-home .vc-hero__grid { grid-template-columns: 1fr; }
    .vc-page-home .vc-hero__art { order: -1; }
    .vc-page-home .vc-trust__grid { grid-template-columns: repeat(2, 1fr); }
    .vc-page-home .vc-tiles { grid-template-columns: repeat(2, 1fr); }
    .vc-page-home .vc-steps__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .vc-page-home .vc-carousel__btn { display: none; } /* en móvil se desliza con el dedo */
}
@media (max-width: 520px) {
    .vc-page-home .vc-trust__grid,
    .vc-page-home .vc-tiles { grid-template-columns: 1fr; }
    .vc-page-home .vc-hero-cta .vc-btn { flex: 1 1 100%; justify-content: center; }
    .vc-page-home .vc-b2b { flex-direction: column; align-items: flex-start; }
}