/* ============================================================
   ECOVIAL360 — producto.css
   Página de detalle de producto individual.
   Depende de global.css.
   ============================================================ */

/* ─── LAYOUT PRODUCTO ────────────────────────────────────────────────────── */
.producto-page {
    background: var(--blanco-fondo);
    padding-block: var(--gap-3xl);
}

.producto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

/* ─── BREADCRUMB ─────────────────────────────────────────────────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-size: var(--text-xs);
    color: #A0ADA0;
    margin-bottom: var(--gap-2xl);
}
.breadcrumb a { color: #6B7280; text-decoration: none; transition: color var(--transition-fast); }
.breadcrumb a:hover { color: var(--verde-bosque); }
.breadcrumb__sep { opacity: 0.4; }
.breadcrumb__actual { color: var(--verde-bosque); font-weight: 600; }

/* ─── GALERÍA / IMAGEN ───────────────────────────────────────────────────── */
.producto-galeria {
    position: sticky;
    top: 90px;
}

.galeria-principal {
    position: relative;
    background: var(--crema-suave);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.galeria-principal__img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    transition: transform var(--transition-slow);
}
.galeria-principal:hover .galeria-principal__img {
    transform: scale(1.04);
}

/* ── Badges flotantes sobre la imagen (Verde Lima Suave) ── */
.galeria-badges {
    position: absolute;
    top: var(--gap-md);
    left: var(--gap-md);
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    z-index: 2;
}

.badge-flotante {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35em 0.85em;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: badgeEntrada 0.4s ease both;
}

/* Verde Lima Suave — badges principales */
.badge-flotante--lima {
    background: var(--lima-suave);        /* #C4E538 */
    color: var(--verde-bosque);
    box-shadow: 0 2px 12px rgba(196,229,56,0.40);
}

/* Variante más suave */
.badge-flotante--palido {
    background: var(--verde-palido);      /* #EDF2EB */
    color: var(--verde-bosque);
    border: 1px solid rgba(26,83,26,0.15);
}

/* Variante bosque (para destacado) */
.badge-flotante--bosque {
    background: var(--verde-bosque);
    color: var(--verde-lima);
}

@keyframes badgeEntrada {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Badge de oferta en esquina superior derecha */
.galeria-oferta {
    position: absolute;
    top: var(--gap-md);
    right: var(--gap-md);
    width: 56px;
    height: 56px;
    background: var(--verde-lima);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.1;
    color: var(--verde-bosque);
    box-shadow: 0 4px 16px rgba(142,214,0,0.40);
    animation: pulseBadge 2.5s ease-in-out infinite;
    z-index: 2;
}
.galeria-oferta__pct { font-size: 1rem; }
.galeria-oferta__off { font-size: 0.55rem; text-transform: uppercase; }

@keyframes pulseBadge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* Miniaturas */
.galeria-thumbs {
    display: flex;
    gap: var(--gap-sm);
    margin-top: var(--gap-md);
    flex-wrap: wrap;
}
.galeria-thumb {
    width: 68px;
    height: 68px;
    border-radius: var(--radius-sm);
    background: var(--crema-suave);
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.galeria-thumb.active,
.galeria-thumb:hover { border-color: var(--verde-bosque); }

/* ─── INFORMACIÓN DEL PRODUCTO ───────────────────────────────────────────── */
.producto-info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}

.producto-info__categoria {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--verde-lima);
}

.producto-info__nombre {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--verde-bosque);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Rating */
.producto-rating {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}
.rating-stars { color: var(--verde-lima); letter-spacing: 2px; font-size: var(--text-base); }
.rating-numero { font-weight: 700; color: var(--verde-bosque); font-size: var(--text-sm); }
.rating-reseñas { font-size: var(--text-sm); color: #6B7280; text-decoration: underline; cursor: pointer; }

/* Precio */
.producto-precio {
    display: flex;
    align-items: baseline;
    gap: var(--gap-md);
    flex-wrap: wrap;
}
.precio-actual {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--verde-bosque);
    line-height: 1;
}
.precio-actual sub { font-size: 0.45em; vertical-align: super; font-weight: 700; }
.precio-anterior {
    font-size: var(--text-xl);
    color: #A0ADA0;
    text-decoration: line-through;
}
.precio-ahorro {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    background: var(--lima-suave-30);
    color: var(--verde-bosque);
    padding: 0.3em 0.8em;
    border-radius: var(--radius-pill);
}

/* ── Caja de alerta con borde Verde Bosque ── */
.alerta-stock {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md);
    border: 2px solid var(--verde-bosque);
    border-radius: var(--radius-md);
    padding: var(--gap-md) var(--gap-lg);
    background: var(--verde-palido);
    position: relative;
    overflow: hidden;
}

/* Línea de acento izquierda */
.alerta-stock::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--verde-bosque);
}

.alerta-stock__icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.alerta-stock__texto {}

.alerta-stock__titulo {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--verde-bosque);
    margin-bottom: 2px;
}

.alerta-stock__desc {
    font-size: var(--text-sm);
    color: #4A7A4A;
    line-height: 1.4;
}

/* Alerta de urgencia (stock bajo) */
.alerta-urgencia {
    border-color: #E67E22;
    background: #FFF8F0;
}
.alerta-urgencia::before { background: #E67E22; }
.alerta-urgencia .alerta-stock__titulo { color: #A04000; }
.alerta-urgencia .alerta-stock__desc { color: #7D4A10; }

/* ─── SELECTOR DE CANTIDAD ───────────────────────────────────────────────── */
.cantidad-selector {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
}
.cantidad-label {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--verde-bosque);
}
.cantidad-control {
    display: flex;
    align-items: center;
    border: 1.5px solid #D1D9CF;
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.cantidad-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    font-size: var(--text-lg);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--verde-bosque);
    cursor: pointer;
    transition: background var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cantidad-btn:hover { background: var(--verde-palido); }
.cantidad-num {
    min-width: 40px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--verde-bosque);
    border: none;
    outline: none;
    background: transparent;
}

/* ─── CTAs DE COMPRA ─────────────────────────────────────────────────────── */
.producto-ctas {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.btn-comprar {
    font-size: var(--text-lg);
    padding: 1em 2em;
}

/* Garantías inline bajo los CTAs */
.ctas-garantias {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
    flex-wrap: wrap;
    padding-top: var(--gap-sm);
}
.cta-garantia {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    color: #6B7280;
}
.cta-garantia__icon { font-size: 1rem; }

/* ─── TABS: Descripción / Características / FAQ ──────────────────────────── */
.producto-tabs {
    margin-top: var(--gap-3xl);
    border-top: 2px solid var(--crema-suave);
    padding-top: var(--gap-2xl);
}

.tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #E5EAE3;
    margin-bottom: var(--gap-2xl);
    overflow-x: auto;
}

.tab-btn {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    color: #6B7280;
    padding: 0.75em 1.5em;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    margin-bottom: -2px;
}
.tab-btn:hover { color: var(--verde-bosque); }
.tab-btn.active { color: var(--verde-bosque); border-bottom-color: var(--verde-lima); }

.tab-panel { display: none; animation: fadeIn 0.3s ease both; }
.tab-panel.active { display: block; }

/* Lista de características */
.features-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md);
}
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding: var(--gap-md);
    background: var(--crema-suave);
    border-radius: var(--radius-md);
    border: 1px solid rgba(26,83,26,0.06);
}
.feature-item__check {
    width: 22px;
    height: 22px;
    background: var(--verde-bosque);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--verde-lima);
    font-size: 0.65rem;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
}
.feature-item__texto { font-size: var(--text-sm); color: var(--texto-oscuro); line-height: 1.5; }
.feature-item__titulo { font-weight: 700; color: var(--verde-bosque); }

/* FAQ */
.faq-item {
    border-bottom: 1px solid #E5EAE3;
    padding-block: var(--gap-md);
}
.faq-item:last-child { border-bottom: none; }
.faq-pregunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--verde-bosque);
    list-style: none;
}
.faq-pregunta::after { content: '+'; font-size: var(--text-xl); font-weight: 400; color: var(--verde-lima); transition: transform var(--transition-fast); }
.faq-item[open] .faq-pregunta::after { transform: rotate(45deg); }
.faq-respuesta { font-size: var(--text-sm); color: #6B7280; line-height: 1.7; padding-top: var(--gap-sm); }

/* ─── PRODUCTOS RELACIONADOS ─────────────────────────────────────────────── */
.relacionados {
    margin-top: var(--gap-3xl);
    padding-top: var(--gap-3xl);
    border-top: 2px solid var(--crema-suave);
}
.relacionados__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-lg);
}

/* ── Tarjetas relacionadas: mismo estilo que catálogo pero compactas ── */
.relacionados .product-card {
    background: var(--blanco-fondo);
    border: 1.5px solid #E5EAE3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
    position: relative;
}

.relacionados .product-card:hover {
    box-shadow: var(--sombra-elevada);
    transform: translateY(-3px);
    border-color: var(--lima-suave);
}

/* Imagen compacta */
.relacionados .product-card__image {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--crema-suave);
}

.relacionados .product-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.relacionados .product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--gap-md);
    transition: transform var(--transition-slow);
}

.relacionados .product-card:hover .product-card__image img {
    transform: scale(1.05);
}

/* Body compacto */
.relacionados .product-card__body {
    padding: var(--gap-md) var(--gap-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.relacionados .product-card__category {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--verde-bosque);
    opacity: .65;
}

.relacionados .product-card__name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--verde-bosque);
    line-height: 1.2;
    margin: 0;
}

.relacionados .product-card__desc {
    font-size: var(--text-xs);
    color: #6B7280;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
}

/* Footer compacto */
.relacionados .product-card__footer {
    padding: var(--gap-sm) var(--gap-lg);
    border-top: 1px solid #E5EAE3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    margin-top: auto;
}

.relacionados .product-card__pricing {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.relacionados .product-card__price-old {
    font-size: var(--text-xs);
    color: #A0ADA0;
    text-decoration: line-through;
    line-height: 1;
}

.relacionados .product-card__price {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--verde-bosque);
    line-height: 1;
}

.relacionados .product-card__price-note {
    font-size: 0.6rem;
    color: #6B7280;
    line-height: 1.3;
}

/* Botón compacto */
.relacionados .product-card__cta .btn {
    font-size: var(--text-xs);
    padding: 0.6em 1em;
    white-space: nowrap;
}

/* Badge */
.relacionados .product-card__badge {
    position: absolute;
    top: var(--gap-sm);
    left: var(--gap-sm);
    z-index: 2;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .producto-grid { grid-template-columns: 1fr; }
    .producto-galeria { position: static; }
    .features-list { grid-template-columns: 1fr; }
    .relacionados__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .producto-info__nombre { font-size: var(--text-2xl); }
    .precio-actual { font-size: var(--text-3xl); }
    .tabs-nav { gap: 0; }
    .tab-btn { padding: 0.75em 1em; font-size: var(--text-xs); }
    .relacionados__grid { grid-template-columns: 1fr; }
    .galeria-badges { flex-direction: row; flex-wrap: wrap; }
}