/* ============================================================ CASA LUJANO — Custom CSS v2.1 Sabor Mexicano · Dallas, TX ============================================================ */ /* ══════════════════════════════════════════════════════════════ PORTO — Primary color override → Pink #e91e8c ══════════════════════════════════════════════════════════════ */ :root { --primary: #e91e8c; --secondary: #c01570; } /* ══════════════════════════════════════════════════════════════ HEADER — fondo madera solo cuando sticky Porto agrega .sticky-header-active en al hacer scroll ══════════════════════════════════════════════════════════════ */ html.sticky-header-active #header .header-body { background: url('../img/background_madera_02.jpg') top center / 100% auto repeat-y !important; border-bottom: none !important; } /* En móvil sticky está deshabilitado — fondo madera siempre visible */ @media (max-width: 991px) { #header .header-body { background: url('../img/background_madera_02.jpg') top center / cover !important; border-bottom: none !important; } } html .text-color-primary, html .text-primary { color: #e91e8c !important; } html .text-color-hover-primary:hover, html .text-hover-primary:hover { color: #c01570 !important; } a { color: #e91e8c; } a:hover, a:focus { color: #c01570; } .nav-link { color: #e91e8c; } .nav-link:hover, .nav-link:focus { color: #c01570; } .nav-pills > li.active > a, .nav-pills .nav-link.active { background-color: #e91e8c; } .nav-pills > li.active > a:hover, .nav-pills .nav-link.active:hover, .nav-pills > li.active > a:focus, .nav-pills .nav-link.active:focus { background-color: #c01570; } @media (min-width: 992px) { #header .header-nav-main nav > ul > li > a { color: #fff; font-size: 15px !important; letter-spacing: .08em; } #header .header-nav-main nav > ul > li.open > a, #header .header-nav-main nav > ul > li:hover > a { background: rgba(255,255,255,.15); color: #FFF; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu { border-top-color: #e91e8c; } #header .header-nav-main nav > ul:not(:hover) > li > a.active { background-color: transparent; color: #e91e8c !important; } #header .header-nav-main nav > ul > li > a.active { color: #e91e8c !important; } #header .header-nav-main nav > ul > li > a.active:before { border-color: #e91e8c; } #header .header-nav-main nav > ul > li:hover > a.active, #header .header-nav-main nav > ul > li.open > a.active { color: #FFF !important; } } @media (max-width: 991px) { #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a { color: #fff; font-size: 15px !important; } #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a.active { background: #e91e8c; color: #FFF; } } #header .header-btn-collapse-nav { background: #e91e8c; } html .svg-fill-color-primary { fill: #e91e8c !important; } html .svg-fill-color-primary svg path, html .svg-fill-color-primary svg rect, html .svg-fill-color-primary svg line, html .svg-fill-color-primary svg polyline, html .svg-fill-color-primary svg polygon { fill: #e91e8c !important; } html .svg-fill-color-hover-primary:hover { fill: #e91e8c !important; } .btn-link { color: #e91e8c; } .btn-link:hover { color: #c01570; } .btn-gradient:not(.btn-outline) { background: linear-gradient(135deg,#e91e8c 0%,#c01570 80%) !important; color: #FFF; } .btn-gradient:not(.btn-outline):hover { background: linear-gradient(135deg,#ff3aa0 0%,#d41880 80%) !important; color: #FFF; } a.custom-link-effect-1, .custom-link-effect-1 { color: #e91e8c !important; } .alternative-font { color: #e91e8c; } /* Label verde oliva — "¿Descubre nuestros platillos?" */ .cl-label-verde { color: #D0D25D; font-size: .88rem; font-weight: 700; letter-spacing: .04em; text-transform: none; } /* ══════════════════════════════════════════════════════════════ BANNER INTERMEDIO (cactus / "Lo mejor del sabor mexicano") ══════════════════════════════════════════════════════════════ */ .cl-banner-mid { position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: center; justify-content: center; } /* Capa de fondo — se mueve con JS (parallax real) */ .cl-banner-bg { position: absolute; inset: -30% 0; /* extra espacio arriba y abajo para el desplazamiento */ background-image: url('../img/banner_intermedio.jpg'); background-size: cover; background-position: center center; z-index: 0; will-change: transform; } /* .cl-banner-mid::before — overlay removido */ .cl-banner-mid-inner { position: relative; z-index: 2; /* texto encima del overlay */ text-align: center; padding: 50px 24px; } .cl-banner-mid-text { color: #fff; font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.45); margin: 0; } /* ══════════════════════════════════════════════════════════════ GET TO KNOW US — Decoraciones flotantes ══════════════════════════════════════════════════════════════ */ .cl-float-left { position: absolute; left: -20px; top: 50%; transform: translateY(-50%); height: 92%; width: auto; max-width: 340px; object-fit: contain; pointer-events: none; z-index: 0; } .cl-float-right { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); height: 88%; width: auto; max-width: 290px; object-fit: contain; pointer-events: none; z-index: 0; } .cl-molcajete-img { max-height: 560px; width: 100%; object-fit: contain; } /* ══════════════════════════════════════════════════════════════ MENÚ — lightbox zoom icon ══════════════════════════════════════════════════════════════ */ .cl-menu-slide a.cl-menu-lightbox { position: relative; display: inline-block; cursor: zoom-in; overflow: hidden; border-radius: 4px; } .cl-menu-zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0); transition: background .3s ease; pointer-events: none; } .cl-menu-zoom i { color: #fff; font-size: 2.4rem; opacity: 0; transform: scale(.7); transition: opacity .3s ease, transform .3s ease; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); } .cl-menu-lightbox:hover .cl-menu-zoom { background: rgba(0,0,0,.32); } .cl-menu-lightbox:hover .cl-menu-zoom i { opacity: 1; transform: scale(1); } /* Popup — sin margen para mostrar la imagen más grande */ .mfp-cl-menu.mfp-bg { background: rgba(0,0,0,.90); } .mfp-cl-menu .mfp-figure { margin: 0; } .mfp-cl-menu .mfp-img { max-height: 88vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); } .mfp-cl-menu .mfp-close { color: #fff; font-size: 2rem; right: 0; top: -46px; } /* Flechas de la galería */ .mfp-cl-menu .mfp-arrow { opacity: 1; } .mfp-cl-menu .mfp-arrow::before, .mfp-cl-menu .mfp-arrow::after { border-top-width: 16px; border-bottom-width: 16px; } .mfp-cl-menu .mfp-arrow-left::after { border-right-color: #fff; } .mfp-cl-menu .mfp-arrow-right::after { border-left-color: #fff; } .mfp-cl-menu .mfp-arrow:hover { opacity: .75; } /* Contador 1 / 3 */ .mfp-cl-menu .mfp-counter { color: #fff; font-size: .9rem; font-weight: 600; letter-spacing: .05em; top: 10px; right: 10px; } /* Título debajo de la imagen */ .mfp-cl-menu .mfp-title { color: rgba(255,255,255,.7); font-size: .85rem; text-align: center; padding-top: 8px; } /* ══════════════════════════════════════════════════════════════ MENÚ — fondo verde lima + slider simple ══════════════════════════════════════════════════════════════ */ .cl-menu-section { background-color: #D0D25D !important; } .cl-menu-slider-wrap { position: relative; max-width: 700px; margin: 0 auto; padding: 0 80px 40px; } .cl-menu-slides { width: 100%; text-align: center; } .cl-menu-slide { display: none; } .cl-menu-slide.active { display: block; animation: clMenuFadeIn .4s ease; } @keyframes clMenuFadeIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } .cl-menu-slide img { max-height: 520px; width: auto; max-width: 100%; object-fit: contain; box-shadow: 0 12px 40px rgba(0,0,0,.25); } /* Flechas */ .cl-menu-arrow { position: absolute; top: 50%; transform: translateY(-60%); z-index: 10; background: #fff; border: none; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 14px rgba(0,0,0,.18); transition: box-shadow .2s; } .cl-menu-arrow:hover { box-shadow: 0 6px 22px rgba(0,0,0,.28); } .cl-menu-arrow svg { width: 22px; height: 22px; color: #333; } .cl-menu-prev { left: 0; } .cl-menu-next { right: 0; } /* ══════════════════════════════════════════════════════════════ ABOUT US — animaciones: zoom-in al aparecer + rotación lenta ══════════════════════════════════════════════════════════════ */ @keyframes cl-zoom-in { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: scale(1); } } .appear-animation-visible.cl-zoom-in { animation: cl-zoom-in .85s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Rotación lenta continua — se aplica al dentro del wrapper */ @keyframes cl-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .cl-spin-slow { animation: cl-spin-slow 28s linear infinite; display: block; } /* ══════════════════════════════════════════════════════════════ ¡PROVECHO! ══════════════════════════════════════════════════════════════ */ .cl-provecho-section { background: #fff !important; padding-top: clamp(20px, 3vw, 40px) !important; padding-bottom: 2rem !important; overflow: visible; position: relative; z-index: 1; } .cl-provecho-wrap { display: flex; align-items: center; /* imagen y texto centrados entre sí */ justify-content: center; flex-wrap: nowrap; } .cl-provecho-text { color: #e91e8c; font-size: clamp(3rem, 8vw, 7.5rem); font-weight: 900; letter-spacing: 0; line-height: 1; font-style: normal; white-space: nowrap; } .cl-provecho-img { height: clamp(160px, 24vw, 340px); width: auto; object-fit: contain; margin: 0; /* sin gap entre imagen y letras */ flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════ GALERÍA 4 × 2 ══════════════════════════════════════════════════════════════ */ .cl-gallery-section { background: #000; line-height: 0; } .cl-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 300px); gap: 0; } .cl-gallery-item { overflow: hidden; position: relative; } /* Enlace lightbox ocupa toda la celda */ .cl-gallery-item a.cl-gallery-lb { display: block; width: 100%; height: 100%; position: relative; cursor: zoom-in; } .cl-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; } .cl-gallery-item:hover img { transform: scale(1.06); } /* Ícono expand al hacer hover */ .cl-gal-zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0); transition: background .3s ease; pointer-events: none; } .cl-gal-zoom i { color: #fff; font-size: 2rem; opacity: 0; transform: scale(.7); transition: opacity .3s ease, transform .3s ease; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); } .cl-gallery-lb:hover .cl-gal-zoom { background: rgba(0,0,0,.35); } .cl-gallery-lb:hover .cl-gal-zoom i { opacity: 1; transform: scale(1); } /* Popup galería platillos */ .mfp-cl-gallery.mfp-bg { background: rgba(0,0,0,.92); } .mfp-cl-gallery .mfp-figure { margin: 0; } .mfp-cl-gallery .mfp-img { max-height: 90vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.7); } .mfp-cl-gallery .mfp-close { color: #fff; font-size: 2rem; } .mfp-cl-gallery .mfp-arrow { opacity: .9; } .mfp-cl-gallery .mfp-arrow:hover { opacity: 1; } .mfp-cl-gallery .mfp-arrow-left::after { border-right-color: #fff; } .mfp-cl-gallery .mfp-arrow-right::after { border-left-color: #fff; } .mfp-cl-gallery .mfp-counter { color: #fff; font-size: .9rem; font-weight: 600; top: 10px; right: 10px; } /* ══════════════════════════════════════════════════════════════ PASIÓN ❤ MÉXICO ══════════════════════════════════════════════════════════════ */ @keyframes cl-heartbeat { 0% { transform: scale(1); } 14% { transform: scale(1.18); } 28% { transform: scale(1); } 42% { transform: scale(1.12); } 70% { transform: scale(1); } 100% { transform: scale(1); } } .cl-pasion-section { background: #fff !important; } .cl-pasion-wrap { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 0 16px; } .cl-pasion-text { color: #5f8200; font-size: clamp(2.2rem, 6vw, 5.5rem); font-weight: 900; letter-spacing: .2em; line-height: 1; } .cl-mexico-text { color: #e91e8c; font-size: clamp(2.2rem, 6vw, 5.5rem); font-weight: 900; letter-spacing: .2em; line-height: 1; } .cl-pasion-img { height: clamp(120px, 18vw, 260px); width: auto; object-fit: contain; animation: cl-heartbeat 1.4s ease-in-out infinite; transform-origin: center bottom; } /* ══════════════════════════════════════════════════════════════ FOOTER — Nuevo diseño ══════════════════════════════════════════════════════════════ */ /* Footer: fondo de madera en todo el elemento */ .cl-footer-new { background: url('../img/slides/01/background_madera.jpg') top center / 100% auto repeat-y !important; position: relative; } /* Imagen decorativa que se monta sobre el separador blanco */ .cl-fn-top-img { position: absolute; top: 0; left: 0; width: 100%; height: 80px; transform: none; pointer-events: none; z-index: 5; line-height: 0; background-image: url('../img/waves.png'); background-repeat: repeat-x; background-size: auto 100%; background-position: left top; -webkit-mask-image: none; mask-image: none; } .cl-fn-top-img-el { display: none; } @media (max-width: 991px) { .cl-fn-top-img { height: 65px; } } @media (max-width: 576px) { .cl-fn-top-img { height: 50px; } } /* Info de contacto */ .cl-fn-info-item { display: flex; align-items: flex-start; gap: 14px; } /* Íonos SVG (location, phone) — color blanco */ .cl-fn-icon-svg path, .cl-fn-icon-svg circle, .cl-fn-icon-svg rect, .cl-fn-icon-svg line, .cl-fn-icon-svg polyline, .cl-fn-icon-svg polygon { fill: #e91e8c !important; } /* Reloj FA outline */ .cl-fn-clock { color: #e91e8c; font-size: 1.3rem; min-width: 26px; margin-top: 2px; flex-shrink: 0; display: inline-block; } .cl-fn-label { color: #e91e8c; font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 4px; } .cl-fn-text { color: rgba(255,255,255,.82); font-size: .88rem; line-height: 1.55; margin: 0; } .cl-fn-link { color: rgba(255,255,255,.82); text-decoration: none; } .cl-fn-link:hover { color: #fff; } /* Logo central */ .cl-fn-logo { max-height: 160px; width: auto; filter: drop-shadow(0 4px 18px rgba(0,0,0,.5)); } /* Botones de redes sociales */ .cl-fn-social-btn { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); color: #fff; font-size: 1.1rem; text-decoration: none; transition: border-color .25s, background .25s; } .cl-fn-social-btn:hover { border-color: #fff; background: rgba(255,255,255,.2); color: #fff; text-decoration: none; } /* Barra inferior — negro */ .cl-fn-bottom { background: rgba(0,0,0,.85); } .cl-fn-bottom-text { color: rgba(255,255,255,.75); font-size: .82rem; } .cl-fn-bottom-text strong { font-weight: 700; color: #fff; } .cl-fn-bottom-ornament { height: 56px; width: auto; max-width: 90%; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); opacity: .9; display: block; margin: 0 auto; } @media (max-width: 767px) { .cl-fn-bottom-ornament { height: 44px; } } /* Mobile */ @media (max-width: 991px) { .cl-fn-logo { max-height: 130px; } .cl-fn-info-item { justify-content: center; text-align: center; } } /* Footer — padding-top para que el contenido no quede debajo de la decoración */ #pading-footer { padding-top: 90px !important; } @media (max-width: 991px) { #pading-footer { padding-top: 75px !important; } } @media (max-width: 576px) { #pading-footer { padding-top: 60px !important; } } @media (max-width: 1199px) { .cl-float-left, .cl-float-right { display: none; } } @media (max-width: 991px) { .cl-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 220px); } .cl-menu-carousel-wrap { padding: 0 60px 24px; } } @media (max-width: 767px) { .body { margin-top: 0 !important; } .cl-provecho-text { font-size: 2.2rem; letter-spacing: .06em; } .cl-pasion-text, .cl-mexico-text { font-size: 2rem; letter-spacing: .1em; } .cl-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 170px); } } @media (max-width: 576px) { .cl-provecho-wrap { flex-wrap: wrap; } .cl-menu-carousel-wrap { padding: 0 48px 20px; } } /* ── About móvil ≤ 640px — imagen más grande ── */ @media (max-width: 640px) { .cl-nosotros-img-col { flex: 0 0 85% !important; max-width: 85% !important; } } @media (max-width: 640px) { /* Columna de info: centra el bloque como grupo */ .col-lg-4.order-3 { display: flex; flex-direction: column; align-items: center; } /* Cada item: ancho fijo para que los 3 iconos queden al mismo eje */ .cl-fn-info-item { flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; width: 210px; text-align: left; } .cl-fn-info-item > div { text-align: left; } /* Reloj alineado igual que los SVG */ .cl-fn-clock { display: flex; align-items: center; min-width: 26px; } /* "Hecho con pasión" centrado */ .cl-fn-bottom .text-md-end { text-align: center !important; } }