/* ============================================================
   Two Bites · Sistema visual
   Se carga DESPUÉS del <style> de cada página para unificar
   todos los componentes bajo el mismo lenguaje del configurador:
   plano, geométrico, rojo solo como acento.
   ============================================================ */

/* ── 1. NADA DE DEGRADADOS DECORATIVOS ──────────────────────
   Los degradados oscuros sobre foto (hero) NO se tocan: son capas
   de legibilidad, no decoración. Aquí solo caen los de elemento. */
.pillar-icon, .valor-icon, .how-icon, .occ-icon, .step-num,
.dd-icon, .feature-icon, .why-icon, .value-icon {
    background-image: none !important;
}
.valor-icon::after, .occasion-card::before, .pillar-icon::after {
    background-image: none !important;
    background: none !important;
}
.valores, .testimonials, .process, .contact-section,
.benefit-banner, .promo-banner, .discount-section, .why-us, .intro,
.occasion-card, .discount-card, .cta-final, .final-cta {
    background-image: none !important;
}

/* IMPORTANTE: al quitar el degradado hay que devolver el color sólido.
   Si no, las secciones oscuras se quedan en blanco y su texto (blanco)
   se vuelve invisible.

   OJO: hay nombres de clase que significan cosas distintas según la página
   (.process es oscura en horeca pero blanca en wework; .final-cta es blanca
   en index mientras .cta-final es roja en wework). Por eso cada regla va
   acotada a su página con la clase del <body>. */

/* Fondos casi negros */
.testimonials, .contact-section,
.page-horeca .process,
.discount-card {
    background-color: #141416 !important;
}

/* Fondos rojos */
.promo-banner, .occasion-card, .benefit-banner, .cta-final {
    background-color: var(--red, #8b1a1a) !important;
}

/* Fondos claros */
.valores, .why-us {
    background-color: #f7f7f5 !important;
}

/* ── 2. FUERA SOMBRAS BLANDAS ───────────────────────────────
   Se conservan: la línea del header al hacer scroll y el anillo
   de foco (accesibilidad). Todo lo demás, plano. */
.valor-card, .service-card, .cta-panel, .deep-dive-col, .how-card,
.pillar-card, .occasion-card, .step, .why-item, .feature-card,
.cat-image, .prod-card, .flavor-card, .price-card, .pricing-card,
.form-card, .faq-item, .line-card, .path-card, .trust-metrics *,
.hero-eyebrow::before, .hero-partner-badge,
.promo-banner, .discount-card, .benefit-banner,
.pillar-icon, .valor-icon, .how-icon, .occ-icon, .step-num,
.dd-icon, .feature-icon, .why-icon, .value-icon {
    box-shadow: none !important;
}
.valor-card:hover, .service-card:hover, .cta-panel:hover,
.deep-dive-col:hover, .how-card:hover, .pillar-card:hover,
.occasion-card:hover, .contact-wa:hover, .flavor-card:hover,
.prod-card:hover, .path-card:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* ── 3. ICONOS: cuadrado suave, no círculo de color ──────────
   El círculo relleno de color es el tic más reconocible; se
   sustituye por un contenedor neutro con el icono en rojo. */
.pillar-icon, .valor-icon, .how-icon, .occ-icon,
.dd-icon, .feature-icon, .why-icon, .value-icon {
    background-color: var(--bg-alt, #f5f5f7) !important;
    border-radius: 10px !important;
    color: var(--red, #8b1a1a) !important;
}
.pillar-icon svg, .valor-icon svg, .how-icon svg, .occ-icon svg,
.dd-icon svg, .feature-icon svg, .why-icon svg, .value-icon svg {
    stroke: var(--red, #8b1a1a) !important;
    fill: none !important;
}

/* ── 4. RADIOS NORMALIZADOS ─────────────────────────────────
   Escala única: 10px celdas · 12px tarjetas · 14px paneles
   · 980px píldoras. Nada de 11, 16, 18, 20, 22. */
.valor-card, .service-card, .deep-dive-col, .how-card, .pillar-card,
.occasion-card, .why-item, .feature-card, .line-card, .step,
.prod-card, .flavor-card {
    border-radius: 12px !important;
}
.form-card, .cta-panel, .cta-box, .price-card, .pricing-card,
.cat-image, .catalog-hero-img, .deep-dive-metrics, .faq-item,
.summary-card, .discount-card, .hero-image, .how-image {
    border-radius: 14px !important;
}

/* ── 5. BORDES COHERENTES ───────────────────────────────────
   Un solo gris de borde en todo el sitio. */
.valor-card, .service-card, .how-card, .pillar-card, .occasion-card,
.why-item, .feature-card, .line-card, .prod-card, .flavor-card,
.faq-item, .form-card {
    border-color: #e6e6e1 !important;
}

/* ── 6. TOKENS DE MARCA ÚNICOS ──────────────────────────────
   El rojo canónico es #8b1a1a (el que declara <meta theme-color>
   en las 6 páginas). Antes horeca y catering usaban #a81b1b, y
   había 3 grises de borde y 3 fondos alternativos distintos. */
:root {
    --red: #8b1a1a !important;
    --gray-border: #e0e0e0 !important;
    --bg-alt: #f7f7f5 !important;
}

/* ── 7. NAVEGACIÓN ──────────────────────────────────────────
   En móvil se ocultan los enlaces secundarios para que quepan
   los principales y el botón de pedir. */
@media (max-width: 768px) {
    nav a.nav-hide-mobile { display: none !important; }
}
