/* =============================================================================
   ECOVIAL360 — productos.css
   Estilos exclusivos de la página /productos/
   Depende de: global.css, home-sales.css
   ============================================================================= */

/* ── Cabecera de catálogo ── */
.catalogo-hero {
    background: var(--verde-bosque);
    padding-block: clamp(3rem, 6vw, 5rem);
    position: relative;
    overflow: hidden;
}
.catalogo-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 80% at 80% 50%, rgba(142,214,0,.10) 0%, transparent 70%);
    pointer-events: none;
}
.catalogo-hero__inner { position: relative; z-index: 1; }
.catalogo-hero__tag {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .10em;
    color: var(--verde-lima); margin-bottom: var(--gap-md);
}
.catalogo-hero__tag::before { content: ''; width: 24px; height: 2px; background: var(--verde-lima); border-radius: 999px; }
.catalogo-hero__title { font-size: var(--text-3xl); font-weight: 800; color: var(--blanco-fondo); margin-bottom: var(--gap-sm); letter-spacing: -.02em; }
.catalogo-hero__title em { font-style: normal; color: var(--verde-lima); }
.catalogo-hero__desc { color: rgba(255,255,255,.65); font-size: var(--text-md); max-width: 50ch; }
 /* ── Barra de filtros ── */
.filtros-bar {
    background: var(--blanco-fondo);
    border-bottom: 1px solid #E5EAE3;
    padding-block: var(--gap-md);
}
.filtros-inner {
    display: flex; align-items: center; gap: var(--gap-md); flex-wrap: wrap;
}
.filtros-search {
    position: relative; flex: 1; min-width: 200px;
}
.filtros-search__icon {
    position: absolute; left: .9em; top: 50%; transform: translateY(-50%);
    color: #A0ADA0; pointer-events: none; font-size: 1rem;
}
.filtros-search__input {
    width: 100%; padding: .7em 1em .7em 2.5em;
    border: 1.5px solid #D1D9CF; border-radius: var(--radius-pill);
    font-family: var(--font-body); font-size: var(--text-sm);
    outline: none; transition: border-color var(--transition-fast);
    background: var(--crema-suave);
}
.filtros-search__input:focus { border-color: var(--verde-bosque); background: var(--blanco-fondo); }
 .filtro-cats { display: flex; gap: var(--gap-xs); flex-wrap: wrap; }
.filtro-cat {
    font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
    padding: .45em 1.1em; border-radius: var(--radius-pill);
    border: 1.5px solid #D1D9CF; background: transparent; color: #6B7280;
    cursor: pointer; transition: all var(--transition-fast); white-space: nowrap;
}
.filtro-cat:hover { border-color: var(--verde-bosque); color: var(--verde-bosque); }
.filtro-cat.active { background: var(--verde-bosque); border-color: var(--verde-bosque); color: var(--blanco-fondo); }
 .filtros-orden {
    font-family: var(--font-body); font-size: var(--text-sm);
    border: 1.5px solid #D1D9CF; border-radius: var(--radius-pill);
    padding: .55em 1em; outline: none; background: var(--crema-suave);
    cursor: pointer; transition: border-color var(--transition-fast);
}
.filtros-orden:focus { border-color: var(--verde-bosque); }
 /* ── Grid de productos ── */
.catalogo-section { padding-block: var(--gap-3xl); background: var(--crema-suave); }
 .catalogo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gap-xl);
}
 /* Contador de resultados */
.resultados-info {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--gap-xl); flex-wrap: wrap; gap: var(--gap-md);
}
.resultados-count {
    font-family: var(--font-display); font-size: var(--text-base); font-weight: 700;
    color: var(--verde-bosque);
}
.resultados-count span { color: var(--verde-lima); }
 /* Empty state */
.catalogo-empty {
    grid-column: 1/-1; text-align: center; padding: var(--gap-3xl);
    color: #A0ADA0;
}
.catalogo-empty__icon { font-size: 4rem; margin-bottom: var(--gap-lg); }
.catalogo-empty__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--verde-bosque); margin-bottom: var(--gap-sm); }
 /* Loading skeleton */
.skeleton-card {
    background: var(--blanco-fondo); border-radius: var(--radius-lg);
    overflow: hidden; border: 1.5px solid #E5EAE3;
}
.skeleton-img { aspect-ratio: 4/3; background: linear-gradient(90deg, #E5EAE3 25%, #EDF2EB 50%, #E5EAE3 75%); background-size: 200%; animation: shimmer 1.4s infinite; }
.skeleton-body { padding: var(--gap-lg); display: flex; flex-direction: column; gap: var(--gap-sm); }
.skeleton-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #E5EAE3 25%, #EDF2EB 50%, #E5EAE3 75%); background-size: 200%; animation: shimmer 1.4s infinite; }
.skeleton-line--short { width: 60%; }
.skeleton-line--title { height: 20px; margin-bottom: 4px; }
 /* ── Trust bar ── */
.trust-bar { background: var(--crema-suave); border-bottom: 1px solid #E5EAE3; padding-block: .75rem; }
.trust-bar__inner { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); flex-wrap: wrap; }
.trust-bar__item { display: flex; align-items: center; gap: .5rem; font-size: var(--text-xs); font-weight: 600; color: #4B5563; white-space: nowrap; }
.trust-bar__item svg { color: var(--verde-bosque); flex-shrink: 0; }
 /* ── CTA con imagen de fondo ── */
.cta-car { position: relative; overflow: hidden; padding-block: clamp(4rem, 9vw, 7rem); text-align: center; }
.cta-car__bg { position: absolute; inset: 0; z-index: 0; }
.cta-car__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.cta-car__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(15,50,15,.87) 0%, rgba(10,38,10,.70) 100%); }
.cta-car__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--gap-lg); }
.cta-car__eyebrow { font-size: var(--text-sm); font-weight: 600; color: var(--verde-lima); letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.cta-car__title { font-size: clamp(1.8rem, 4.5vw, 3rem); font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -.02em; max-width: 18ch; margin: 0; }
.cta-car__title em { font-style: normal; color: var(--verde-lima); }
.cta-car__desc { font-size: var(--text-md); color: rgba(255,255,255,.72); max-width: 48ch; line-height: 1.65; margin: 0; }
.cta-car__actions { display: flex; gap: var(--gap-md); flex-wrap: wrap; justify-content: center; margin-top: var(--gap-sm); }
.cta-car__trust { display: flex; gap: var(--gap-lg); flex-wrap: wrap; justify-content: center; margin-top: var(--gap-md); padding-top: var(--gap-md); border-top: 1px solid rgba(255,255,255,.15); }
.cta-car__trust span { font-size: var(--text-sm); color: rgba(255,255,255,.70); display: flex; align-items: center; gap: 6px; }
 /* ── Sección proceso ── */
.cat-proceso { padding-block: var(--gap-3xl); background: var(--blanco-fondo); }
.cat-proceso__steps { display: flex; align-items: flex-start; justify-content: center; gap: 0; margin-top: var(--gap-2xl); }
.cat-proceso__step { flex: 1; max-width: 240px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--gap-md); padding-inline: var(--gap-md); }
.cat-proceso__num { font-size: .65rem; font-weight: 800; letter-spacing: .08em; color: var(--verde-lima); background: var(--verde-bosque); padding: 3px 8px; border-radius: var(--radius-pill); margin-bottom: -4px; }
.cat-proceso__icon { width: 64px; height: 64px; background: var(--crema-suave); border: 2px solid rgba(46,125,50,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--verde-bosque); flex-shrink: 0; margin-top: var(--gap-md); transition: box-shadow .2s, border-color .2s; }
.cat-proceso__step:hover .cat-proceso__icon { border-color: var(--verde-bosque); box-shadow: 0 0 0 6px rgba(46,125,50,.08); }
.cat-proceso__step h3 { font-size: var(--text-base); font-weight: 700; color: var(--verde-bosque); margin: 0; }
.cat-proceso__step p { font-size: var(--text-sm); color: #6B7280; line-height: 1.6; margin: 0; }
.cat-proceso__connector { flex: 0 0 50px; height: 2px; background: linear-gradient(90deg, var(--verde-bosque), var(--verde-lima)); align-self: center; margin-top: var(--gap-md); border-radius: 2px; opacity: .3; }
@media (max-width: 700px) {
    .cat-proceso__steps { flex-direction: column; align-items: center; gap: var(--gap-xl); }
    .cat-proceso__connector { width: 2px; height: 32px; flex: 0 0 auto; background: linear-gradient(180deg, var(--verde-bosque), var(--verde-lima)); margin-top: 0; }
    .cat-proceso__step { max-width: 100%; }
    .cta-car__actions { flex-direction: column; align-items: center; }
    .cta-car__actions .btn { width: 100%; max-width: 320px; }
}



/* La barra de filtros baja para no taparse con la urgency-bar visible */
/* Se calcula dinámicamente por JS — ver productos.js */