/* HC Burger — paleta negro, blanco y beis arena (petición de Eva, 28-09-2026). * * Se carga la ÚLTIMA en portada (index.php), carta (hacer-pedido.php), carrito, * checkout y pedido confirmado, y sustituye el naranja/rojo de la web por la * paleta del local. Cada página lleva una clase en (hcp-index, hcp-carta, * hcp-carrito, hcp-checkout, hcp-conf) para que las reglas no se pisen entre sí. * * Para dar un toque de color a los botones de pedir basta con cambiar * --hc-cta (p. ej. a #c8102e para rojo). Quitar el devuelve el naranja. */ :root { --hc-negro: #0f0f0f; --hc-negro-hover: #2b2825; --hc-blanco: #ffffff; --hc-arena: #e3d4b7; /* beis arena */ --hc-arena-claro: #f6f1e7; /* fondo de página */ --hc-arena-2: #eee5d3; /* superficies alternas */ --hc-arena-linea: #ddd0b7; /* bordes */ --hc-arena-marca: #d6c098; /* rotulador de los títulos */ --hc-arena-texto: #6e5634; /* texto de acento sobre claro (AA) */ --hc-gris: #635c52; /* texto secundario */ --hc-cta: var(--hc-negro); /* botones de pedir */ --hc-cta-hover: var(--hc-negro-hover); --hc-cta-texto: #ffffff; --hc-sombra: 0 6px 18px rgba(15, 15, 15, .14); --hc-sombra-hover: 0 10px 26px rgba(15, 15, 15, .22); } /* Resaltado tipo rotulador en arena para las palabras destacadas de los títulos */ .hcp-index .hero-text h1 .acc, .hcp-index .section-title h2 .acc, .hcp-index .nosotros-grid h2 .acc { color: var(--hc-negro) !important; -webkit-text-fill-color: var(--hc-negro); background: linear-gradient(transparent 42%, var(--hc-arena-marca) 42%, var(--hc-arena-marca) 86%, transparent 86%) !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; -webkit-background-clip: border-box; background-clip: border-box; padding: 0 .08em; } /* ================================================================ PORTADA (index.php) ================================================================ */ html.hcp-index { --negro: var(--hc-arena-claro); --negro-2: var(--hc-blanco); --negro-3: var(--hc-arena-2); --rojo: var(--hc-negro); --rojo-osc: #000; --naranja: var(--hc-negro); --amarillo: var(--hc-arena); --crema: var(--hc-arena-claro); --texto: var(--hc-negro); --gris: var(--hc-gris); } .hcp-index .loader-spinner { border-color: rgba(15, 15, 15, .12); border-top-color: var(--hc-negro); } .hcp-index .btn-primary, .hcp-index .btn-cta-main { background: var(--hc-cta); color: var(--hc-cta-texto); box-shadow: var(--hc-sombra); } .hcp-index .btn-primary:hover, .hcp-index .btn-cta-main:hover { background: var(--hc-cta-hover); box-shadow: var(--hc-sombra-hover); } .hcp-index .hero-buttons .btn-secondary { color: var(--hc-negro) !important; border-color: var(--hc-negro) !important; } .hcp-index .btn-secondary:hover { background: var(--hc-negro); border-color: var(--hc-negro); color: var(--hc-blanco) !important; } .hcp-index .top-bar { background: var(--hc-arena-2) !important; } .hcp-index .status-badge.closed { color: var(--hc-negro); } .hcp-index .status-badge.open { color: #15803d; } .hcp-index header { background: rgba(255, 255, 255, .94); border-color: var(--hc-arena-linea) !important; box-shadow: 0 1px 8px rgba(15, 15, 15, .06) !important; } .hcp-index nav ul a:not(.btn) { color: var(--hc-negro); } .hcp-index .logo { display: flex; align-items: center; min-width: 0; } .hcp-index .logo-text { white-space: nowrap; } @media (max-width: 420px) { .hcp-index .logo-text { font-size: 1.3rem; } } .hcp-index nav ul a:not(.btn):hover { color: var(--hc-arena-texto); } .hcp-index .hero { background: radial-gradient(circle at 78% 28%, rgba(227, 212, 183, .75), transparent 46%), radial-gradient(circle at 18% 82%, rgba(227, 212, 183, .45), transparent 42%), var(--hc-arena-claro); } .hcp-index .hero-text .eyebrow { background: var(--hc-negro) !important; color: var(--hc-arena) !important; } .hcp-index .hero-burger { filter: drop-shadow(0 24px 34px rgba(15, 15, 15, .22)); } .hcp-index .hero-text p.hero-desc { margin-bottom: 14px; } .hcp-index .hero-text p.hero-pide { color: var(--hc-negro); font-weight: 600; } .hcp-index .section-title .sub-fuerte { font-family: 'Anton', 'Poppins', sans-serif; font-size: clamp(1.35rem, 3.4vw, 1.9rem); text-transform: uppercase; letter-spacing: .5px; line-height: 1.1; color: var(--hc-negro); margin-top: 10px; } .hcp-index .producto-card:hover { border-color: var(--hc-arena) !important; box-shadow: var(--hc-sombra-hover) !important; } .hcp-index .producto-img { background: linear-gradient(135deg, var(--hc-arena-claro), var(--hc-arena-2)) !important; } .hcp-index .precio-badge { background: var(--hc-negro); color: var(--hc-blanco); box-shadow: var(--hc-sombra); } .hcp-index .producto-cat { color: var(--hc-arena-texto); } .hcp-index header, .hcp-index footer, .hcp-index .top-bar, .hcp-index .producto-card, .hcp-index .feature-card { border-color: var(--hc-arena-linea) !important; } .hcp-index .producto-card, .hcp-index .feature-card { box-shadow: 0 4px 14px rgba(15, 15, 15, .06) !important; } .hcp-index .feature-card { background: var(--hc-arena-claro); } .hcp-index .feature-card:hover { border-color: var(--hc-arena) !important; } .hcp-index .destacados, .hcp-index .features { background: var(--hc-blanco); } .hcp-index .nosotros { background: var(--hc-arena-claro); } .hcp-index .nosotros-stats .num { background: none; color: var(--hc-negro); -webkit-text-fill-color: var(--hc-negro); } .hcp-index .nosotros-card { background: var(--hc-negro); color: var(--hc-blanco); } .hcp-index .nosotros-card strong, .hcp-index .nosotros-card b { color: var(--hc-arena); } .hcp-index .cta { background: var(--hc-negro); } .hcp-index .cta h2 { color: var(--hc-blanco) !important; } .hcp-index .cta p { color: rgba(255, 255, 255, .78); } .hcp-index .cta .btn-cta-main { background: var(--hc-arena); color: var(--hc-negro); } .hcp-index .cta .btn-cta-main:hover { background: #efe3cb; } .hcp-index .cta .btn-secondary { border-color: rgba(255, 255, 255, .7); color: var(--hc-blanco); } .hcp-index .cta .btn-secondary:hover { background: var(--hc-blanco); color: var(--hc-negro) !important; } .hcp-index footer { background: var(--hc-blanco); } .hcp-index .footer-section h2 span { color: var(--hc-arena-texto); } .hcp-index .footer-section a:hover { color: var(--hc-negro); text-decoration: underline; } .hcp-index .social-link { background: var(--hc-arena-2); } .hcp-index .social-link:hover { background: var(--hc-arena); } .hcp-index .footer-bottom { border-color: var(--hc-arena-linea); } /* ================================================================ CARTA (hacer-pedido.php) ================================================================ */ html.hcp-carta { --primary: var(--hc-negro); --secondary: var(--hc-negro); --dark: var(--hc-negro); --gray: var(--hc-gris); --bg: var(--hc-arena-claro); --border: var(--hc-arena-linea) !important; --shadow: rgba(15, 15, 15, .08) !important; --danger: var(--hc-negro) !important; } .hcp-carta body { background: var(--hc-arena-claro) !important; } .hcp-carta .header { background: var(--hc-blanco) !important; border-bottom: 1px solid var(--hc-arena-linea) !important; } .hcp-carta .logo-text { background: none; color: var(--hc-negro); -webkit-text-fill-color: var(--hc-negro); } .hcp-carta .cart-button-header { background: var(--hc-cta); color: var(--hc-cta-texto); } .hcp-carta .cart-count, .hcp-carta .floating-cart-count { background: var(--hc-arena); color: var(--hc-negro); } .hcp-carta .floating-cart { background: var(--hc-cta); box-shadow: var(--hc-sombra-hover); } .hcp-carta .hero { background: var(--hc-negro); } .hcp-carta .hero h1 { color: var(--hc-blanco); } .hcp-carta .hero p { color: var(--hc-arena); } .hcp-carta .content-section { border-color: var(--hc-arena-linea); } .hcp-carta .search-container { border-color: var(--hc-arena-linea); } .hcp-carta .search-container:focus-within { border-color: var(--hc-negro); box-shadow: 0 0 0 3px rgba(15, 15, 15, .08); } .hcp-carta .search-results-count { background: var(--hc-arena-2); color: var(--hc-negro); } .hcp-carta .category-tabs { background: var(--hc-arena-2); } .hcp-carta .category-tab { background: transparent; color: var(--hc-gris); } .hcp-carta .category-tab:hover { color: var(--hc-negro); } .hcp-carta .category-tab.active { background: var(--hc-negro); border-color: var(--hc-negro); color: var(--hc-blanco); box-shadow: none; } .hcp-carta .category-header { border-image: linear-gradient(90deg, var(--hc-negro), var(--hc-arena), transparent) 1; } .hcp-carta .product-card { border-color: var(--hc-arena-linea); } .hcp-carta .product-card:hover { border-color: var(--hc-arena); box-shadow: var(--hc-sombra); } .hcp-carta .product-image-container { background: linear-gradient(135deg, var(--hc-arena-claro), var(--hc-arena-2)); } .hcp-carta .product-allergens { color: var(--hc-arena-texto); background: var(--hc-arena-claro); border-color: var(--hc-arena-linea); } .hcp-carta .product-price { color: var(--hc-negro) !important; } .hcp-carta .quantity-control { background: var(--hc-blanco); } .hcp-carta .quantity-btn:hover { background: var(--hc-negro); color: var(--hc-blanco); } /* mobile-fixes.css pinta el botón de verde con !important: hay que ganarle igual */ .hcp-carta .add-btn, .hcp-carta .modal-add-btn { background: var(--hc-cta) !important; color: var(--hc-cta-texto) !important; box-shadow: none !important; } .hcp-carta .add-btn:hover:not(:disabled), .hcp-carta .modal-add-btn:hover { background: var(--hc-cta-hover) !important; box-shadow: var(--hc-sombra) !important; } .hcp-carta .add-btn:disabled, .hcp-carta .add-btn[disabled] { background: #b9b2a7 !important; color: #f6f1e7 !important; } .hcp-carta .delivery-option.selected { border-color: var(--hc-negro); background: var(--hc-arena-claro); } .hcp-carta .checkout-btn { background: var(--hc-cta); } .hcp-carta .toast { background: var(--hc-negro); } .hcp-carta .offer-card, .hcp-carta .modal-offer-badge { background: var(--hc-negro); box-shadow: var(--hc-sombra); } .hcp-carta .offer-card:hover { box-shadow: var(--hc-sombra-hover); } .hcp-carta .modal-price { color: var(--hc-negro) !important; } .hcp-carta .suggestion-chip { background: var(--hc-arena-2) !important; border-color: var(--hc-arena-linea); color: var(--hc-negro) !important; } .hcp-carta .suggestion-chip:hover, .hcp-carta .modal-quantity-btn:hover { background: var(--hc-negro) !important; color: var(--hc-blanco) !important; } /* Mini-carrito desplegable (escritorio) */ .hcp-carta .cd-item { border-color: var(--hc-arena-2); } .hcp-carta .cd-item-name, .hcp-carta .cd-total { color: var(--hc-negro); } .hcp-carta .cd-item-price { color: var(--hc-negro); } .hcp-carta .cd-qty button { border-color: var(--hc-arena-linea); background: var(--hc-arena-claro); color: var(--hc-negro); } .hcp-carta .cd-btn { background: var(--hc-cta); color: var(--hc-cta-texto); } /* Ficha de producto (añadir / quitar ingredientes) */ .hcp-carta .pm-overlay { background: rgba(15, 15, 15, .72); } .hcp-carta .pm-img { background: linear-gradient(135deg, var(--hc-arena-claro), var(--hc-arena-2)); } .hcp-carta .pm-body h2, .hcp-carta .pm-meta b, .hcp-carta .pm-ing-nom, .hcp-carta .pm-pers h3 { color: var(--hc-negro); } .hcp-carta .pm-desc { color: var(--hc-gris); } .hcp-carta .pm-precio { color: var(--hc-negro); } .hcp-carta .pm-foot, .hcp-carta .pm-pers { border-color: var(--hc-arena-2); } .hcp-carta .pm-pers h3 { background: var(--hc-arena-claro); } .hcp-carta .pm-ing { border-color: var(--hc-arena-2); } .hcp-carta .pm-qty button, .hcp-carta .pm-ext button { border-color: var(--hc-arena-linea); background: var(--hc-arena-claro); color: var(--hc-negro); } .hcp-carta .pm-quitar { border-color: var(--hc-arena-linea); color: var(--hc-negro); } .hcp-carta .pm-quitar.on { background: var(--hc-negro); border-color: var(--hc-negro); color: var(--hc-blanco); } .hcp-carta .pm-quitar.on-add { background: var(--hc-arena); border-color: #c8b48e; color: var(--hc-negro); } .hcp-carta .pm-add { background: var(--hc-cta); color: var(--hc-cta-texto); } .hcp-carta .pm-add:hover { background: var(--hc-cta-hover); } /* ================================================================ CARRITO (carrito.php) ================================================================ */ html.hcp-carrito { --primary: var(--hc-negro); --secondary: var(--hc-negro); --dark: var(--hc-negro); --light: var(--hc-blanco); --bg: var(--hc-arena-claro); --border: var(--hc-arena-linea) !important; --danger: var(--hc-negro) !important; } .hcp-carrito body { background: var(--hc-arena-claro) !important; } .hcp-carrito .header { background: rgba(255, 255, 255, .96) !important; border-bottom: 1px solid var(--hc-arena-linea) !important; } .hcp-carrito .logo-text { background: none; color: var(--hc-negro); -webkit-text-fill-color: var(--hc-negro); } .hcp-carrito .nav-btn.primary { background: var(--hc-cta); color: var(--hc-cta-texto); } .hcp-carrito .page-title { color: var(--hc-negro); text-shadow: none; } .hcp-carrito .cart-content, .hcp-carrito .order-summary-mobile, .hcp-carrito .order-summary-desktop { box-shadow: 0 0 0 1px var(--hc-arena-linea), 0 8px 24px rgba(15, 15, 15, .05); } .hcp-carrito .cart-item { background: var(--hc-arena-claro); } .hcp-carrito .clear-cart-btn { background: var(--hc-blanco); color: var(--hc-negro); box-shadow: inset 0 0 0 1.5px var(--hc-negro); } .hcp-carrito .clear-cart-btn:hover { background: var(--hc-negro); color: var(--hc-blanco); } .hcp-carrito .remove-btn-absolute { background: var(--hc-negro); } .hcp-carrito .item-image { background: var(--hc-arena); } .hcp-carrito .quantity-control { border-color: var(--hc-negro); } .hcp-carrito .quantity-btn { color: var(--hc-negro); } .hcp-carrito .delivery-option.selected { border-color: var(--hc-negro); background: var(--hc-arena-claro); } .hcp-carrito .checkout-btn { background: var(--hc-cta); color: var(--hc-cta-texto); } .hcp-carrito .checkout-btn:hover:not(:disabled) { background: var(--hc-cta-hover); } .hcp-carrito .toast { background: var(--hc-negro); } .hcp-carrito .toast:empty, .hcp-carta .toast:empty { visibility: hidden; } /* ================================================================ CHECKOUT (checkout.php — ya en negro y crema, solo el botón) ================================================================ */ .hcp-checkout .submit-btn { background: var(--hc-cta) !important; color: var(--hc-cta-texto) !important; } .hcp-checkout .submit-btn:hover { background: var(--hc-cta-hover) !important; } .hcp-checkout .submit-btn:disabled { background: #b9b2a7 !important; } .hcp-checkout :focus-visible { outline-color: var(--hc-negro); } .hcp-checkout .item-name small[style*="b45309"] { color: var(--hc-arena-texto) !important; } /* ================================================================ PEDIDO CONFIRMADO (pedido-confirmado.php) ================================================================ */ .hcp-conf body { background: var(--hc-arena-claro) !important; } .hcp-conf .confirmation-card { box-shadow: 0 0 0 1px var(--hc-arena-linea), 0 20px 50px rgba(15, 15, 15, .08); } .hcp-conf .order-number { background: var(--hc-arena-claro); color: var(--hc-negro); } .hcp-conf .btn-primary { background: var(--hc-cta); color: var(--hc-cta-texto); } .hcp-conf .btn-primary:hover { background: var(--hc-cta-hover); } .hcp-conf .btn-secondary { background: var(--hc-arena-2); color: var(--hc-negro); } .hcp-conf .btn-secondary:hover { background: var(--hc-arena); } /* Enlaces legales (pie de la portada) y aviso de condiciones en el checkout */ .hcp-index .footer-bottom .enlaces-legales { margin-top: 8px; } .hcp-index .footer-bottom .enlaces-legales a { color: var(--hc-gris); text-decoration: underline; text-underline-offset: 2px; } .hcp-index .footer-bottom .enlaces-legales a:hover { color: var(--hc-negro); } .hcp-checkout .aviso-condiciones { margin: 12px 4px 0; font-size: 13px; line-height: 1.45; color: var(--hc-gris); text-align: center; } .hcp-checkout .aviso-condiciones a { color: var(--hc-negro); }