/* ============================================================
   PÁGINAS DE PRODUCTO — Landing de producto (compartido)
   Reutiliza variables y componentes de hongos.css (paleta,
   tarjetas, botones, tipografía). Este archivo se comparte
   entre todas las landings de producto (Ashwagandha, Reishi,
   Melena de León, Cordyceps, etc.) para no duplicar CSS.
   ============================================================ */

.logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

/* Miga de pan */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-green); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--primary-forest); font-weight: 600; }

/* 1. Hero de producto */
.product-hero { padding-top: 24px; padding-bottom: 8px; }
.product-hero-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 56px;
}
.product-hero-media {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(17, 38, 27, 0.1);
    border: 1px solid var(--border-subtle);
}
.product-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-hero-content .badge-top { margin-bottom: 18px; }
.product-hero-content h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.6rem;
    line-height: 1.15;
    color: var(--primary-deep);
    font-weight: 700;
    margin-bottom: 10px;
}
.product-hero-content .title-big {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--accent-green);
    font-weight: 700;
    display: inline-block;
    margin-top: 6px;
}
.product-subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin: 18px 0 22px;
    line-height: 1.5;
}
.product-hero-content .rating-box { margin-bottom: 26px; }
.product-hero-content .hero-actions { margin-bottom: 0; }
.product-hero-content .btn-primary-custom { flex: none; padding: 16px 30px; font-size: 1rem; }

/* 2. Potencia terapéutica: mismas tarjetas que "Diferencial de Proceso" */
.pillars-grid { grid-template-columns: repeat(2, 1fr); }

/* 3. El Diferencial Mycelium */
.differential-card { text-align: left; max-width: 820px; }
.differential-card h2 { text-align: center; }
.differential-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 8px;
}
.differential-list li {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-muted);
    padding-left: 30px;
    position: relative;
}
.differential-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--amber-accent);
}
.differential-list li strong { color: var(--primary-forest); font-weight: 700; }

/* 5. Sello de cierre profesional */
.product-closing {
    flex-wrap: wrap;
    gap: 24px;
}
.product-tech-box {
    background: transparent;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: none;
}
.product-tech-box .tech-info strong { font-size: 1rem; }
.product-tech-box .tech-info span { font-size: 0.85rem; }

@media (max-width: 1024px) {
    .product-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .product-hero-media { max-width: 460px; margin: 0 auto; }
    .product-hero-content { text-align: center; }
    .product-hero-content .hero-actions { justify-content: center; }
    .product-hero-content .rating-box { justify-content: center; }
    .pillars-grid { grid-template-columns: 1fr; }
    .product-closing { flex-direction: column; text-align: center; justify-content: center; }
}

@media (max-width: 768px) {
    .product-hero-content h1 { font-size: 2.1rem; }
    .differential-card { padding: 32px 24px; }
}

/* Nota chica bajo la dosis (pie de página sutil) — variante opcional por producto */
.dose-footnote {
    margin: 8px 0 0;
    font-size: 0.72rem;
    font-style: italic;
    line-height: 1.45;
    color: var(--text-muted);
    letter-spacing: 0.1px;
}

/* Variante simple del cuadro "Diferencial" — un solo párrafo, sin lista con viñetas */
.differential-simple p {
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-muted);
}
.differential-simple p strong { color: var(--primary-forest); font-weight: 700; }

/* Tema borgoña — acentos puntuales para páginas de producto con ese color de marca (ej. Reishi) */
.theme-burgundy .badge-top {
    color: var(--burgundy-accent);
    border-color: rgba(109, 42, 34, 0.25);
    background: rgba(247, 236, 233, 0.9);
}
.theme-burgundy .product-hero-content .title-big { color: var(--burgundy-accent); }
.theme-burgundy .process-icon {
    color: var(--burgundy-accent);
    background: var(--burgundy-soft);
    border-color: rgba(109, 42, 34, 0.18);
}
.theme-burgundy .differential-card { background: linear-gradient(135deg, var(--burgundy-soft) 0%, var(--amber-soft) 100%); }
.theme-burgundy .differential-simple p strong,
.theme-burgundy .bridge-card h2 { color: var(--burgundy-accent); }
.theme-burgundy .btn-primary-custom,
.theme-burgundy .btn-all { background-color: var(--burgundy-accent); }
.theme-burgundy .btn-primary-custom:hover,
.theme-burgundy .btn-all:hover { background-color: #4f1f19; }

/* Tema naranja — acentos puntuales para páginas de producto con ese color de marca (ej. Cordyceps) */
.theme-orange .badge-top {
    color: var(--orange-text);
    border-color: rgba(217, 100, 12, 0.25);
    background: rgba(253, 240, 228, 0.9);
}
.theme-orange .product-hero-content .title-big { color: var(--orange-accent); }
.theme-orange .process-icon {
    color: var(--orange-accent);
    background: var(--orange-soft);
    border-color: rgba(217, 100, 12, 0.2);
}
.theme-orange .differential-card { background: linear-gradient(135deg, var(--orange-soft) 0%, var(--amber-soft) 100%); }
.theme-orange .differential-simple p strong { color: var(--orange-text); }
.theme-orange .bridge-card h2 { color: var(--orange-accent); }
.theme-orange .btn-primary-custom,
.theme-orange .btn-all { background-color: var(--orange-text); }
.theme-orange .btn-primary-custom:hover,
.theme-orange .btn-all:hover { background-color: #8a3a07; }
.theme-orange .p-step-highlight .ps-ico-circle {
    box-shadow: 0 0 0 3px var(--orange-soft), 0 6px 16px rgba(217, 100, 12, 0.2);
    color: var(--orange-accent);
}
.theme-orange .p-step-highlight strong { color: var(--orange-text); }

/* Tema gris — categoría "Salud Metabólica" (ej. Shiitake) */
.theme-gris .badge-top {
    color: var(--gris-text);
    border-color: rgba(85, 96, 106, 0.25);
    background: rgba(240, 241, 243, 0.9);
}
.theme-gris .product-hero-content .title-big { color: var(--gris-accent); }
.theme-gris .process-icon {
    color: var(--gris-accent);
    background: var(--gris-soft);
    border-color: rgba(85, 96, 106, 0.2);
}
.theme-gris .differential-card { background: linear-gradient(135deg, var(--gris-soft) 0%, var(--mint-soft) 100%); }
.theme-gris .differential-simple p strong { color: var(--gris-text); }
.theme-gris .bridge-card h2 { color: var(--gris-accent); }
.theme-gris .btn-primary-custom,
.theme-gris .btn-all { background-color: var(--gris-text); }
.theme-gris .btn-primary-custom:hover,
.theme-gris .btn-all:hover { background-color: #2b3238; }
.theme-gris .p-step-highlight .ps-ico-circle {
    box-shadow: 0 0 0 3px var(--gris-soft), 0 6px 16px rgba(85, 96, 106, 0.2);
    color: var(--gris-accent);
}
.theme-gris .p-step-highlight strong { color: var(--gris-text); }

/* Tema celeste — categoría "Rendimiento Mental" (ej. Enoki) */
.theme-celeste .badge-top {
    color: var(--celeste-text);
    border-color: rgba(31, 111, 139, 0.25);
    background: rgba(233, 244, 248, 0.9);
}
.theme-celeste .product-hero-content .title-big { color: var(--celeste-accent); }
.theme-celeste .process-icon {
    color: var(--celeste-accent);
    background: var(--celeste-soft);
    border-color: rgba(31, 111, 139, 0.2);
}
.theme-celeste .differential-card { background: linear-gradient(135deg, var(--celeste-soft) 0%, var(--mint-soft) 100%); }
.theme-celeste .differential-simple p strong { color: var(--celeste-text); }
.theme-celeste .bridge-card h2 { color: var(--celeste-accent); }
.theme-celeste .btn-primary-custom,
.theme-celeste .btn-all { background-color: var(--celeste-text); }
.theme-celeste .btn-primary-custom:hover,
.theme-celeste .btn-all:hover { background-color: #0f3b48; }
.theme-celeste .p-step-highlight .ps-ico-circle {
    box-shadow: 0 0 0 3px var(--celeste-soft), 0 6px 16px rgba(31, 111, 139, 0.2);
    color: var(--celeste-accent);
}
.theme-celeste .p-step-highlight strong { color: var(--celeste-text); }

/* Tema rosa — categoría "Longevidad y Dermo-Fungi" (ej. Tremella) */
.theme-rosa .badge-top {
    color: var(--rosa-text);
    border-color: rgba(181, 72, 111, 0.25);
    background: rgba(251, 238, 243, 0.9);
}
.theme-rosa .product-hero-content .title-big { color: var(--rosa-accent); }
.theme-rosa .process-icon {
    color: var(--rosa-accent);
    background: var(--rosa-soft);
    border-color: rgba(181, 72, 111, 0.2);
}
.theme-rosa .differential-card { background: linear-gradient(135deg, var(--rosa-soft) 0%, var(--amber-soft) 100%); }
.theme-rosa .differential-simple p strong { color: var(--rosa-text); }
.theme-rosa .bridge-card h2 { color: var(--rosa-accent); }
.theme-rosa .btn-primary-custom,
.theme-rosa .btn-all { background-color: var(--rosa-text); }
.theme-rosa .btn-primary-custom:hover,
.theme-rosa .btn-all:hover { background-color: #6c2941; }
.theme-rosa .p-step-highlight .ps-ico-circle {
    box-shadow: 0 0 0 3px var(--rosa-soft), 0 6px 16px rgba(181, 72, 111, 0.2);
    color: var(--rosa-accent);
}
.theme-rosa .p-step-highlight strong { color: var(--rosa-text); }

/* Tema ámbar — categoría "Energía y Estrés" / uso puntual (ej. Coprinus) */
.theme-amber-page .badge-top {
    color: var(--amber-text);
    border-color: rgba(185, 129, 47, 0.25);
    background: rgba(251, 243, 230, 0.9);
}
.theme-amber-page .product-hero-content .title-big { color: var(--amber-accent); }
.theme-amber-page .process-icon {
    color: var(--amber-accent);
    background: var(--amber-soft);
    border-color: rgba(185, 129, 47, 0.2);
}
.theme-amber-page .differential-card { background: linear-gradient(135deg, var(--amber-soft) 0%, var(--mint-soft) 100%); }
.theme-amber-page .differential-simple p strong { color: var(--amber-text); }
.theme-amber-page .bridge-card h2 { color: var(--amber-accent); }
.theme-amber-page .btn-primary-custom,
.theme-amber-page .btn-all { background-color: var(--amber-text); }
.theme-amber-page .btn-primary-custom:hover,
.theme-amber-page .btn-all:hover { background-color: #6e4a18; }
.theme-amber-page .p-step-highlight .ps-ico-circle {
    box-shadow: 0 0 0 3px var(--amber-soft), 0 6px 16px rgba(185, 129, 47, 0.2);
    color: var(--amber-accent);
}
.theme-amber-page .p-step-highlight strong { color: var(--amber-text); }


/* Paso destacado dentro del protocolo (ej. la toma de la noche cuando es la fundamental) */
.p-step-highlight .ps-ico-circle {
    box-shadow: 0 0 0 3px var(--burgundy-soft), 0 6px 16px rgba(109, 42, 34, 0.18);
    color: var(--burgundy-accent);
}
.p-step-highlight strong { color: var(--burgundy-accent); }

/* Advertencia adicional en el pie de página (ej. interacción con anticoagulantes) */
.footer-warning {
    display: block;
    margin-top: 6px;
    color: #8a3226;
}
.footer-warning strong { color: #8a3226; }