/* Theme Name: Cannibal WP Theme Theme URI: https://corevaccomposites.com/ Description: Custom child theme for Corevac Composites based on Hello Elementor. Author: Corevac Composites Template: hello-elementor Version: 1.5.2 Text Domain: cannibal-wp-theme GitHub Theme URI: https://github.com/heroeskq3/cannibal-wp-theme Primary Branch: main GitHub Branch: main */ /* ============================================================= VARIABLES ============================================================= */ :root { --cnbl-color-bg: #BE1A42; --cnbl-color-text: #ffffff; --cnbl-color-accent: #cc2200; --cnbl-color-hover: #ff3311; --cnbl-header-height: 64px; --cnbl-logo-size: 78px; --cnbl-logo-circle: 110px; --cnbl-transition: 0.25s ease; --cnbl-font: inherit; --cnbl-z-header: 1000; } /* ============================================================= RESET BÁSICO DEL HEADER ============================================================= */ .cnbl-header *, .cnbl-header *::before, .cnbl-header *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================= HEADER PRINCIPAL ============================================================= */ .cnbl-header { position: fixed; top: 26px; left: 0; right: 0; z-index: var(--cnbl-z-header); background-color: var(--cnbl-color-bg); transition: box-shadow var(--cnbl-transition), background-color var(--cnbl-transition); } .cnbl-header::before { content: ""; position: absolute; top: -26px; left: 0; right: 0; height: 26px; background-color: #ffffff; } .cnbl-header { transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease; } /* Estado scrolled — franja sube al top, se encoge */ .cnbl-header.is-scrolled { top: 0; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18); } /* ------------------------------------------------------- ADMIN BAR — Compensación cuando el usuario está logueado. WordPress agrega .admin-bar al y fija la barra en 32px (desktop) o 46px (tablet). El header fixed debe desplazarse hacia abajo para no quedar tapado. ------------------------------------------------------- */ .admin-bar .cnbl-header { top: calc(26px + 32px); /* franja blanca + admin bar desktop */ } .admin-bar .cnbl-header.is-scrolled { top: 32px; /* solo admin bar, sin franja */ } /* Tablet: admin bar sube a 46px entre 600px y 782px */ @media screen and (max-width: 782px) { .admin-bar .cnbl-header { top: calc(26px + 46px); } .admin-bar .cnbl-header.is-scrolled { top: 46px; } } /* Mobile <600px: WP oculta la admin bar, volvemos al top normal */ @media screen and (max-width: 600px) { .admin-bar .cnbl-header { top: 0; } .admin-bar .cnbl-header.is-scrolled { top: 0; } } .cnbl-header.is-scrolled .cnbl-header__inner { height: var(--cnbl-header-height); } .cnbl-header.is-scrolled .cnbl-logo__text { width: auto; max-width: 220px; height: 34px; } .cnbl-header.is-scrolled .cnbl-logo__icon { width: 78px; height: 100px; } .cnbl-header.is-scrolled::before { opacity: 0; pointer-events: none; } .cnbl-header__inner { display: flex; align-items: stretch; justify-content: space-between; max-width: 1400px; width: 100%; margin: 0 auto; height: var(--cnbl-header-height); overflow: visible; transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Empujar contenido de la página para que no quede bajo el header fijo */ body { padding-top: calc(var(--cnbl-header-height) + 26px); } /* ============================================================= LOGO ============================================================= */ .cnbl-header__logo { flex-shrink: 0; position: relative; z-index: 2; display: flex; align-items: center; padding: 0 1rem; overflow: visible; } .cnbl-header__logo-link { display: flex; align-items: center; gap: 2rem; text-decoration: none; position: relative; } /* Wrapper del ícono — el círculo se centra aquí */ .cnbl-logo__icon-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: var(--cnbl-logo-circle); height: var(--cnbl-logo-circle); flex-shrink: 0; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .cnbl-logo__icon-wrap::before { content: ""; position: absolute; inset: 0; background: #ffffff; border-radius: 50%; z-index: 0; transition: inherit; } .cnbl-header.is-scrolled .cnbl-logo__icon-wrap { width: var(--cnbl-logo-circle); height: var(--cnbl-logo-circle); } .cnbl-logo__icon { width: 78px; height: 100px; display: block; position: relative; z-index: 1; object-fit: contain; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .cnbl-logo__text { width: auto; max-width: 220px; height: 34px; display: block; position: relative; z-index: 1; object-fit: contain; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .cnbl-logo__site-title { color: #ffffff; font-size: 1.4rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; position: relative; z-index: 1; } .cnbl-header::before { transition: opacity 0.4s ease; } /* ============================================================= NAVEGACIÓN ============================================================= */ .cnbl-header__nav { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; } .cnbl-nav__list { display: flex; align-items: center; gap: 0.25rem; list-style: none; } /* Ocultar carrito inyectado por WP Menu Cart plugin */ .cnbl-nav__list li.wpmenucartli, .cnbl-mobile-menu__list li.wpmenucartli { display: none !important; } .cnbl-nav__list li a { display: inline-block; padding: 0 0.5rem; color: var(--cnbl-color-text); text-decoration: none; font-size: 16px; font-weight: 700; letter-spacing: 0em; text-transform: none; text-underline-offset: 4px; transition: color var(--cnbl-transition); } .cnbl-nav__list li a:hover { color: var(--cnbl-color-text); text-decoration: underline; text-decoration-color: var(--cnbl-color-text); text-decoration-thickness: 2px; } .cnbl-nav__list li.current-menu-item > a, .cnbl-nav__list li.current-page-ancestor > a { color: #000000; text-decoration: underline; text-decoration-color: #000000; text-decoration-thickness: 2px; } /* Submenú dropdown */ .cnbl-nav__list .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background-color: #1a1a1a; border-top: 2px solid var(--cnbl-color-accent); list-style: none; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 100; } .cnbl-nav__list li { position: relative; } .cnbl-nav__list li:hover > .sub-menu { display: block; } .cnbl-nav__list .sub-menu li a { padding: 0.6rem 1.25rem; border-bottom: none; font-size: 0.85rem; border-left: 2px solid transparent; } .cnbl-nav__list .sub-menu li a:hover { color: var(--cnbl-color-accent); border-left-color: var(--cnbl-color-accent); border-bottom-color: transparent; background-color: #222; } /* ============================================================= ACCIONES (carrito, búsqueda, burger) ============================================================= */ .cnbl-header__actions { display: flex; align-items: center; gap: 0; flex-shrink: 0; padding-right: 0; align-self: stretch; } /* Carrito */ .cnbl-header__cart { position: relative; display: flex; align-items: center; gap: 0.5rem; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 600; padding: 0 1.25rem 0 0.75rem; white-space: nowrap; transition: opacity var(--cnbl-transition); z-index: 2; } .cnbl-header__cart svg { display: block; flex-shrink: 0; width: 24px; height: 24px; } .cnbl-header__cart:hover { opacity: 0.8; } .cnbl-header__cart-count { font-size: 14px; font-weight: 600; color: #ffffff; } /* Botón de búsqueda */ #cnbl-header .cnbl-header__search-toggle { background: #000000 !important; border: none; cursor: pointer; color: #ffffff !important; display: flex; align-items: center; justify-content: center; width: 64px; align-self: stretch; border-radius: 0; flex-shrink: 0; margin: 0; padding: 0; transition: background-color var(--cnbl-transition); } #cnbl-header .cnbl-header__search-toggle svg { width: 18px; height: 18px; stroke: #ffffff; flex-shrink: 0; display: block; } #cnbl-header .cnbl-header__search-toggle:hover { background-color: #222222 !important; } /* Mobile menu — oculto en desktop */ .cnbl-mobile-menu { display: none; } /* Burger */ .cnbl-header__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.25rem; width: 30px; height: 30px; } .cnbl-header__burger span { display: block; width: 100%; height: 2px; background-color: var(--cnbl-color-text); border-radius: 2px; transition: transform var(--cnbl-transition), opacity var(--cnbl-transition); transform-origin: center; } .cnbl-header__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .cnbl-header__burger.is-active span:nth-child(2) { opacity: 0; } .cnbl-header__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================= BARRA DE BÚSQUEDA ============================================================= */ .cnbl-header__search-bar { background-color: #1a1a1a; padding: 1rem 2rem; border-top: 1px solid #2a2a2a; } .cnbl-header__search-bar .search-form { display: flex; max-width: 600px; margin: 0 auto; } .cnbl-header__search-bar input[type="search"] { flex: 1; padding: 0.6rem 1rem; background: #222; border: 1px solid #333; border-right: none; color: #fff; font-size: 0.95rem; outline: none; border-radius: 3px 0 0 3px; } .cnbl-header__search-bar input[type="search"]:focus { border-color: var(--cnbl-color-accent); } .cnbl-header__search-bar button[type="submit"] { padding: 0.6rem 1.25rem; background-color: var(--cnbl-color-accent); border: none; color: #fff; cursor: pointer; font-weight: 600; border-radius: 0 3px 3px 0; transition: background-color var(--cnbl-transition); } .cnbl-header__search-bar button[type="submit"]:hover { background-color: var(--cnbl-color-hover); } /* ============================================================= FOOTER ============================================================= */ /* Reset */ .cnbl-footer *, .cnbl-footer *::before, .cnbl-footer *::after { box-sizing: border-box; margin: 0; padding: 0; } .cnbl-footer { background-color: #111926; color: #cccccc; font-size: 12px; line-height: 1.6; } .cnbl-footer__container { max-width: 1300px; width: 100%; margin: 0 auto; padding: 0 2rem; } /* ---- Main section ---- */ .cnbl-footer__main { padding: 3rem 0 2.5rem; } .cnbl-footer__main .cnbl-footer__container { display: flex; align-items: flex-start; gap: 2.5rem; } /* ---- Columns ---- */ .cnbl-footer__col { flex: 1; min-width: 0; } .cnbl-footer__col--contact { flex: 0 0 380px; display: flex; flex-direction: row; align-items: flex-start; gap: 1.25rem; } .cnbl-footer__col--right-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; } /* ---- Skull logo ---- */ .cnbl-footer__brand-logo { display: inline-block; line-height: 0; flex-shrink: 0; } .cnbl-footer__skull { width: 180px; height: 180px; object-fit: contain; border-radius: 50%; background: #1e1e1e; padding: 4px; } /* ---- Contact list ---- */ .cnbl-footer__contact { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .cnbl-footer__contact li { display: flex; align-items: flex-start; gap: 0.5rem; color: #bbbbbb; font-size: 12px; } .cnbl-footer__contact li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: #888; } /* ---- Instagram link ---- */ .cnbl-footer__social-link { color: #bbbbbb !important; text-decoration: none !important; font-size: 13px; transition: color 0.2s ease; } .cnbl-footer__social-link:visited { color: #bbbbbb !important; } .cnbl-footer__social-link:hover { color: #ffffff !important; } .cnbl-footer__social-link:focus, .cnbl-footer__social-link:active { color: #ffffff !important; } /* ---- Column headings ---- */ .cnbl-footer__heading { color: #ffffff !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.75rem; line-height: 1.2; } /* ---- Nav links ---- */ .cnbl-footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.2rem; } .cnbl-footer__links a { color: #aaaaaa; text-decoration: none; font-size: 12px; transition: color 0.2s ease; } .cnbl-footer__links a:hover { color: #ffffff; } /* ---- Links wrapper (SHOP + DEALER + MEDIA) ---- */ .cnbl-footer__links-wrapper { display: flex; flex: 1; gap: 2rem; align-items: flex-start; } .cnbl-footer__links-wrapper .cnbl-footer__col { flex: 1; min-width: 0; } /* ---- Right eagle logo ---- */ .cnbl-footer__right-logo { max-width: 120px; width: 100%; object-fit: contain; opacity: 0.85; } /* ---- Bottom bar ---- */ .cnbl-footer__bottom { background-color: #ffffff; border-top: 1px solid #e0e0e0; padding: 0.9rem 0; } .cnbl-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .cnbl-footer__payments { width: auto; height: auto; display: block; flex-shrink: 0; } .cnbl-footer__copy { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .cnbl-footer__copy-text { font-size: 12px; color: #333; } .cnbl-footer__copy a { color: #555; text-decoration: none; transition: color 0.2s ease; } .cnbl-footer__copy a:hover { color: #000; } .cnbl-footer__legal { list-style: none; display: flex; align-items: center; justify-content: center; gap: 0.55rem; } .cnbl-footer__legal li { display: inline-flex; align-items: center; gap: 0.55rem; } .cnbl-footer__legal li:not(:last-child)::after { content: "|"; color: #777; } .cnbl-footer__legal a { font-size: 12px; } .cnbl-footer__mv { flex-shrink: 0; display: inline-block; line-height: 0; } .cnbl-footer__mv img { width: auto; height: auto; display: block; opacity: 0.75; transition: opacity 0.2s ease; } .cnbl-footer__mv:hover img { opacity: 1; } /* ---- Footer responsive tablet (1024px) ---- */ @media ( max-width: 1024px ) { .cnbl-footer__main { padding: 2.1rem 0 1.5rem; } .cnbl-footer__col--right-logo { display: none; } .cnbl-footer__main .cnbl-footer__container { flex-direction: column; gap: 1rem; align-items: center; } .cnbl-footer__col--contact { flex: 0 0 auto; width: fit-content; max-width: 100%; margin: 0 auto; flex-direction: row; align-items: flex-start; justify-content: center; gap: 1rem; text-align: left; } .cnbl-footer__skull { width: 140px; height: 140px; } .cnbl-footer__brand-logo { margin: 0; } .cnbl-footer__col--contact > div { width: auto; text-align: left; } .cnbl-footer__contact li { justify-content: flex-start; } .cnbl-footer__links-wrapper { display: none; } .cnbl-footer__bottom { padding: 0.65rem 0; } .cnbl-footer__bottom-inner { gap: 1rem; } } /* ---- Footer responsive mobile/tablet (768px) ---- */ @media ( max-width: 768px ) { .cnbl-footer__container { padding: 0 1.25rem; } .cnbl-footer__main { padding: 1.75rem 0 1.25rem; } .cnbl-footer__col--contact { gap: 0.8rem; } .cnbl-footer__skull { width: 120px; height: 120px; } .cnbl-footer__contact { gap: 0.45rem; } .cnbl-footer__bottom-inner { justify-content: center; gap: 0.85rem; } } /* ---- Footer responsive mobile (600px) ---- */ @media ( max-width: 600px ) { .cnbl-footer__main { padding: 1.5rem 0 1.25rem; } .cnbl-footer__main .cnbl-footer__container { gap: 0; } .cnbl-footer__col--contact { flex: 0 0 auto; width: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; text-align: center; } .cnbl-footer__brand-logo { margin: 0 auto; } .cnbl-footer__col--contact > div { width: 100%; text-align: center; } .cnbl-footer__contact li { justify-content: center; } .cnbl-footer__heading { font-size: 14px !important; margin-bottom: 0.9rem; } .cnbl-footer__contact li, .cnbl-footer__social-link, .cnbl-footer__copy-text, .cnbl-footer__legal a { font-size: 14px !important; line-height: 1.45; } .cnbl-footer__contact li svg { width: 17px; height: 17px; margin-top: 2px; } .cnbl-footer__skull { width: min(85vw, 420px); height: min(85vw, 420px); flex-shrink: 0; margin: 0.25rem auto 0.85rem; } .cnbl-footer__links-wrapper { display: none; } /* Bottom bar apilado */ .cnbl-footer__bottom-inner { flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; } .cnbl-footer__payments { order: 1; } .cnbl-footer__copy { order: 2; width: 100%; flex: 0 0 100%; text-align: center; } .cnbl-footer__mv { order: 3; } } /* ============================================================= HERO — Sección principal del home ============================================================= */ .cnbl-hero { position: relative; width: 100%; height: 85vh; min-height: 520px; overflow: hidden; background: #ffffff; } /* Video background — se extiende 4px más allá del contenedor en todos los bordes para eliminar artefactos de subpíxel (franja blanca arriba, línea negra a la derecha). El overflow:hidden del .cnbl-hero recorta el exceso de forma invisible. */ .cnbl-hero__video-wrap { position: absolute; right: -4px; top: -4px; height: calc(100% + 8px); width: auto; aspect-ratio: 16 / 9; pointer-events: none; z-index: 0; background: #000; } /* Poster de precarga: muestra el screenshot mientras el video carga. Se desvanece después de 3s cuando el video ya está corriendo. */ .cnbl-hero__video-wrap::after { content: ''; position: absolute; inset: 0; background: url('assets/img/hero_video_screenshot.png') center / cover no-repeat; z-index: 2; pointer-events: none; animation: cnbl-video-reveal 1.2s ease 3s both; } @keyframes cnbl-video-reveal { from { opacity: 1; } to { opacity: 0; } } .cnbl-hero__video-wrap iframe { width: 100%; height: 100%; border: none; display: block; } /* Gradiente overlay — cubre el texto y disuelve el borde del video */ .cnbl-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to right, rgba(var(--cnbl-shop-hero-gradient-rgb, 255,255,255), 1) 0%, rgba(var(--cnbl-shop-hero-gradient-rgb, 255,255,255), 1) 22%, rgba(var(--cnbl-shop-hero-gradient-rgb, 255,255,255), 0.92) 32%, rgba(var(--cnbl-shop-hero-gradient-rgb, 255,255,255), 0.6) 42%, rgba(var(--cnbl-shop-hero-gradient-rgb, 255,255,255), 0.15) 54%, rgba(var(--cnbl-shop-hero-gradient-rgb, 255,255,255), 0) 65% ); } /* Contenedor de texto */ .cnbl-hero__content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; align-items: center; padding: 0 4rem; box-sizing: border-box; } /* Slides wrapper */ .cnbl-hero__slides { width: 42%; max-width: 480px; } /* Slide individual */ .cnbl-hero__slide { display: none; } /* Slide entrando desde la derecha (siguiente) */ .cnbl-hero__slide.is-active { display: block; animation: cnbl-slide-from-right 0.55s cubic-bezier(0.4, 0, 0.2, 1) both; } /* Slide entrando desde la izquierda (anterior) */ .cnbl-hero__slide.is-active.slide-from-left { animation: cnbl-slide-from-left 0.55s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes cnbl-slide-from-right { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: translateX(0); } } @keyframes cnbl-slide-from-left { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: translateX(0); } } /* Eyebrow */ .cnbl-hero__eyebrow { display: block; font-family: 'Sora', sans-serif !important; font-size: 18px; font-weight: 700; color: #C41142; line-height: 17.6px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.5rem; } /* Título */ .cnbl-hero__title { font-family: 'Bebas Neue', sans-serif !important; font-size: 45px; font-weight: 400; text-transform: uppercase; color: #111111; line-height: 40px; letter-spacing: 0.3px; margin: 0 0 0.75rem; } /* Copy */ .cnbl-hero__copy { font-family: 'Roboto', sans-serif !important; font-size: 18px; font-weight: 400; color: #9AA1AE; line-height: 20px; letter-spacing: 0; margin-bottom: 1.75rem; max-width: 380px; } /* Botones */ .cnbl-hero__buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; } .cnbl-btn { display: inline-block; padding: 11px 26px; border-radius: 30px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s ease; cursor: pointer; border: 2px solid transparent; line-height: 1; } .cnbl-btn--primary { background: #BE1A42 !important; color: #ffffff !important; border-color: #BE1A42 !important; } .cnbl-btn--primary:hover { background: #9B1535 !important; border-color: #9B1535 !important; color: #ffffff !important; } .cnbl-btn--outline { background: transparent !important; color: #111111 !important; border-color: #111111 !important; } .cnbl-btn--outline:hover { background: #111111 !important; color: #ffffff !important; } /* Dots de navegación */ .cnbl-hero__dots { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 0.5rem; align-items: center; } .cnbl-hero__dot { width: 9px !important; height: 9px !important; min-width: 0 !important; min-height: 0 !important; border-radius: 50% !important; border: 2px solid rgba(255,255,255,0.8) !important; background: transparent !important; cursor: pointer !important; padding: 0 !important; box-shadow: none !important; transition: background 0.2s ease, border-color 0.2s ease; } .cnbl-hero__dot.is-active, .cnbl-hero__dot:hover { background: #ffffff !important; border-color: #ffffff !important; } /* Flechas prev / next */ .cnbl-hero__arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 3 !important; width: 44px !important; height: 44px !important; min-width: 0 !important; min-height: 0 !important; border-radius: 50% !important; background: rgba(0,0,0,0.35) !important; border: none !important; color: #ffffff !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; box-shadow: none !important; transition: background 0.2s ease; } .cnbl-hero__arrow--prev { left: 1.5rem !important; right: auto !important; } .cnbl-hero__arrow--next { right: 1.5rem !important; left: auto !important; } .cnbl-hero__arrow:hover { background: rgba(0,0,0,0.6) !important; } .cnbl-hero__arrow svg { display: block !important; pointer-events: none !important; } /* Cursor typewriter */ .cnbl-tw-cursor { display: inline; color: #DED7CE; font-weight: 400; animation: cnbl-blink 0.65s step-end infinite; margin-left: 1px; } .cnbl-tw-cursor--done { animation: none; opacity: 0; transition: opacity 0.6s ease; } @keyframes cnbl-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Caption foto */ .cnbl-hero__caption { position: absolute; bottom: 1.5rem; right: 5rem; z-index: 3; font-family: 'Roboto Mono', monospace !important; font-size: 18px; font-weight: 400; color: #DED7CE; line-height: 20px; letter-spacing: 0; font-style: normal; max-width: none; white-space: pre-line; text-align: right; } /* ---- Hero responsive tablet (768px – 1024px) ---- */ @media ( max-width: 1024px ) { .cnbl-hero { height: 72vh; min-height: 460px; } .cnbl-hero__slides { width: 58%; max-width: 420px; } .cnbl-hero__title { font-size: 36px; line-height: 34px; } .cnbl-hero__eyebrow { font-size: 15px; } .cnbl-hero__copy { font-size: 15px; line-height: 19px; } } /* ---- Hero responsive mobile (< 768px) ---- */ @media ( max-width: 768px ) { /* Fondo negro: elimina la franjita blanca antes de que el video cargue */ .cnbl-hero { height: 88vh; min-height: 420px; background: #0a0a0a !important; } /* POSTER en mobile: se aplica al hero directamente (no al video-wrap que es 3× más ancho que la pantalla). Así el screenshot queda centrado y proporcional al área visible. Se desvanece igual que en desktop a los 3s. */ .cnbl-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: url('assets/img/hero_video_screenshot.png') center / cover no-repeat; pointer-events: none; animation: cnbl-video-reveal 1.2s ease 3s both; } /* Deshabilitar el poster del video-wrap en mobile (lo maneja el ::before del hero) */ .cnbl-hero__video-wrap::after { display: none !important; animation: none !important; } /* Video cover portrait — anclado al top, dimensiones vh explícitas para que el iframe sea exactamente 16:9 sin letterbox de YouTube. */ .cnbl-hero__video-wrap { position: absolute !important; top: 0 !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; /* vh directo → ambas dimensiones son exactamente 16:9, sin redondeo */ height: max(88vh, 420px) !important; width: calc(max(88vh, 420px) * 16 / 9) !important; aspect-ratio: unset !important; min-width: unset !important; padding-bottom: 0 !important; } .cnbl-hero__video-wrap iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } /* Gradiente: blanco sólido en el 52% inferior (zona de texto), transición rápida al transparente para que el video respire arriba. */ .cnbl-hero__overlay { background: linear-gradient( to top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 52%, rgba(255,255,255,0.15) 68%, rgba(255,255,255,0) 80% ); top: 0; bottom: 0; left: 0; right: 0; height: 100%; z-index: 1; } /* Texto anclado abajo, bien dentro de la zona blanca */ .cnbl-hero__content { position: absolute !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; padding: 1.5rem 1.5rem 5.5rem !important; align-items: flex-end !important; justify-content: flex-start !important; } .cnbl-hero__slides { width: 100%; max-width: none; } .cnbl-hero__eyebrow { font-size: 13px; line-height: 1; } .cnbl-hero__title { font-size: 30px; line-height: 28px; margin-bottom: 0.5rem; } .cnbl-hero__copy { font-size: 14px; line-height: 18px; margin-bottom: 1rem; max-width: 100%; } /* Flechas más compactas en mobile */ .cnbl-hero__arrow { width: 36px !important; height: 36px !important; top: auto !important; bottom: 1.25rem !important; transform: none !important; } .cnbl-hero__arrow--prev { left: auto !important; right: 4rem !important; } .cnbl-hero__arrow--next { right: 1rem !important; left: auto !important; } /* Dots arriba de las flechas */ .cnbl-hero__dots { bottom: 1.2rem; left: 1.5rem; transform: none; } /* Caption oculto en mobile */ .cnbl-hero__caption { display: none; } } /* ============================================================= RESPONSIVE — TABLET (1024px) ============================================================= */ @media ( max-width: 1024px ) { .cnbl-logo__text { width: auto; max-width: 220px; height: 34px; } .cnbl-nav__list li a { padding: 0 0.35rem; font-size: 14px; } } /* ============================================================= RESPONSIVE — MOBILE (768px) ============================================================= */ @media ( max-width: 768px ) { /* --- Header layout mobile --- */ .cnbl-header__inner { padding: 0 12px; align-items: center; justify-content: space-between; box-sizing: border-box; } /* Hamburger — extremo izquierdo */ #cnbl-header .cnbl-header__burger { display: flex !important; order: 1; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; min-width: 44px; margin-left: 0; padding: 0.6rem; background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; cursor: pointer; } #cnbl-header .cnbl-header__burger span { display: block !important; width: 22px !important; height: 2px !important; background-color: #ffffff !important; border-radius: 0 !important; transition: transform 0.25s ease, opacity 0.25s ease; } /* Carrito: ocultar texto "X items" en mobile, solo ícono */ .cnbl-header__cart-count { display: none; } /* Logo: ocultar águila, mostrar solo texto centrado */ .cnbl-header__logo { flex: 1; justify-content: center; order: 2; padding: 0 8px; min-width: 0; } .cnbl-logo__icon-wrap { display: none; } #cnbl-header .cnbl-logo__text, #cnbl-header.cnbl-header.is-scrolled .cnbl-logo__text { width: auto; max-width: 130px !important; height: 24px !important; max-height: 24px !important; margin: 0 auto; transition: none; object-fit: contain !important; } /* Acciones: carrito visible, search oculto — extremo derecho */ .cnbl-header__actions { order: 3; flex-shrink: 0; width: 44px; min-width: 44px; justify-content: center; padding-right: 0; } .cnbl-header__cart { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; } .cnbl-header__logo-link { width: 100%; justify-content: center; gap: 0; } #cnbl-header .cnbl-header__search-toggle { display: none; } /* Ocultar nav en mobile por defecto */ .cnbl-header__nav { display: none; } /* --- Menú hamburguesa overlay --- */ .cnbl-mobile-menu { display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000000; z-index: 9999; display: flex; flex-direction: column; overflow-y: auto; transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .cnbl-mobile-menu.is-open { transform: translateX(0); } /* Header interno del menú mobile */ .cnbl-mobile-menu__header { display: flex !important; align-items: center; justify-content: flex-end; padding: 0 12px; height: 52px; background: #000000 !important; border-bottom: 1px solid #111111; flex-shrink: 0; } .cnbl-mobile-menu__header img { display: none !important; } .cnbl-mobile-menu__close { background: none !important; border: none !important; color: #ffffff !important; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; font-size: 1.8rem; line-height: 1; box-shadow: none !important; border-radius: 0 !important; } .cnbl-mobile-menu__close:hover, .cnbl-mobile-menu__close:focus, .cnbl-mobile-menu__close:focus-visible, .cnbl-mobile-menu__close:active { color: #ffffff !important; background: transparent !important; opacity: 1 !important; } .cnbl-mobile-menu__list { list-style: none; margin: 0; padding: 0; width: 100%; } .cnbl-mobile-menu__list li { border-bottom: 1px solid #1a1a1a; } .cnbl-mobile-menu__list li a { display: flex; align-items: center; padding: 0 2rem; height: 70px; color: #ffffff !important; text-decoration: none !important; font-size: 1.2rem; font-weight: 700; text-transform: none; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease; } .cnbl-mobile-menu__list li a:hover { background-color: #1a1a1a; color: #ffffff !important; } .cnbl-mobile-menu__list li a:active { background-color: #222222; color: #ffffff !important; } .cnbl-mobile-menu__list li.current-menu-item > a { color: var(--cnbl-color-bg) !important; } .cnbl-mobile-menu__list li a::selection, .cnbl-mobile-menu__list li a *::selection { background: transparent; } /* Sin franja blanca en mobile — header pegado al top, altura reducida, sin efectos scroll */ :root { --cnbl-header-height: 52px; } .cnbl-header { top: 0 !important; transition: none !important; } .cnbl-header__inner, .cnbl-logo__icon, .cnbl-logo__icon-wrap, .cnbl-logo__text { transition: none !important; } .cnbl-header::before { display: none; } body { padding-top: var(--cnbl-header-height) !important; } } /* Mobile angosto (iPhone SE y similares) */ @media (max-width: 390px) { .cnbl-header__inner { padding: 0 10px; } .cnbl-header__logo { padding: 0 6px; } #cnbl-header .cnbl-logo__text, #cnbl-header.cnbl-header.is-scrolled .cnbl-logo__text { max-width: min(156px, calc(100vw - 146px)) !important; height: 21px !important; max-height: 21px !important; } .cnbl-header__cart svg { width: 22px; height: 22px; } } /* ============================================================= WOOCOMMERCE — CORRECCIONES DE ESTILOS VISUALES ============================================================= */ /* --------------------------------------------------------------- SHOP — Grilla de productos (JetWooBuilder) --------------------------------------------------------------- */ /* Altura fija del contenedor de imagen: todas las cards iguales */ .jet-woo-product-thumbnail { overflow: hidden; background-color: #f5f5f5; display: block; } .jet-woo-products__thumb-wrap { overflow: hidden; } /* Imagen: altura fija y object-fit contain para no recortar el tablero */ .jet-woo-product-thumbnail img { display: block !important; width: 100% !important; height: 240px !important; object-fit: contain !important; background-color: #ffffff !important; } /* Título del producto en la card */ h5.jet-woo-product-title, .jet-woo-product-title { font-size: 14px !important; font-weight: 700 !important; color: #111111 !important; margin-top: 0.5rem !important; text-transform: uppercase; letter-spacing: 0.03em; } /* Precio en card */ .jet-woo-product-price .price, .jet-woo-product-price span.price { font-size: 14px !important; font-weight: 600 !important; color: #BE1A42 !important; } /* Tags de categoría */ .jet-woo-product-categories { font-size: 11px !important; } /* Botón de card (hover): estilo coherente con la marca */ .jet-woo-product-button a.button, .jet-woo-products .add_to_cart_button { background-color: #BE1A42 !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; padding: 8px 16px !important; transition: background-color 0.2s ease !important; } .jet-woo-product-button a.button:hover, .jet-woo-products .add_to_cart_button:hover { background-color: #9B1535 !important; } /* --------------------------------------------------------------- PRODUCTO — Página individual --------------------------------------------------------------- */ .single-product .site-main { padding-top: 40px; } @media (max-width: 768px) { .single-product .site-main { padding-top: 24px; } } /* Título dentro del summary del single product */ .cnbl-sp-title { margin-bottom: 12px; } .cnbl-sp-title__eyebrow { display: block; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.15em; color: #BE1A42 !important; text-transform: uppercase; margin-bottom: 16px; font-family: inherit !important; } .cnbl-sp-title__heading { font-family: 'Bebas Neue', sans-serif !important; font-size: 64px !important; font-weight: 900 !important; line-height: 1 !important; color: #111111 !important; text-transform: uppercase; margin: 0 0 32px !important; } @media (max-width: 1024px) { .cnbl-sp-title__heading { font-size: 52px !important; } } @media (max-width: 768px) { .cnbl-sp-title { padding: 28px 0 20px; } .cnbl-sp-title__inner { width: min(1200px, calc(100% - 24px)); } .cnbl-sp-title__heading { font-size: 42px !important; } } /* Layout base para el template nativo del single product (feature flag). No afecta mientras Jet siga activo. */ .woocommerce div.product.cnbl-sp .cnbl-sp__inner { display: grid; grid-template-columns: minmax(0, 520px) 340px; gap: clamp(24px, 4vw, 56px); align-items: start; } .woocommerce div.product.cnbl-sp .images, .woocommerce div.product.cnbl-sp .summary { float: none; width: 100%; margin: 0; } /* Galeria estilo Amazon: miniaturas a la izquierda + imagen principal contenida */ .woocommerce div.product.cnbl-sp .images { max-width: min(100%, 620px); } /* Galería con miniaturas: box-sizing content-box + padding-left hace que FlexSlider (jQuery .width()) mida solo el área del viewport principal, ignorando los 90px de la columna de thumbnails. Sin este truco FlexSlider asignaba a cada slide el ancho completo del contenedor y la imagen quedaba desplazada hacia la derecha dentro del viewport con overflow:hidden. */ .woocommerce div.product.cnbl-sp .woocommerce-product-gallery { display: block; position: relative; box-sizing: content-box; } .woocommerce div.product.cnbl-sp .woocommerce-product-gallery:has(.flex-control-thumbs) { /* content-box: total = (100% - 90px) contenido + 90px padding = 100% del padre. jQuery .width() lee solo el contenido (sin padding), por eso FlexSlider calcula el ancho de los slides sin incluir la columna de thumbnails. */ padding-left: 90px; width: calc(100% - 90px); } /* Imagen única: wrapper ocupa el 100% (sin padding de thumbnails) */ .woocommerce div.product.cnbl-sp .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { width: 100%; } .woocommerce div.product.cnbl-sp .woocommerce-product-gallery .flex-viewport { display: block; width: 100%; border-radius: 14px; overflow: hidden; } .woocommerce div.product.cnbl-sp .woocommerce-product-gallery .woocommerce-product-gallery__image a { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #f3f3f3; } .woocommerce div.product.cnbl-sp .woocommerce-product-gallery .woocommerce-product-gallery__image a.cnbl-pan-enabled { cursor: move; } .woocommerce div.product.cnbl-sp .woocommerce-product-gallery .flex-control-thumbs { position: absolute; left: 0; top: 0; width: 76px; display: flex; flex-direction: column; gap: 10px; max-height: 560px; overflow-y: auto; overflow-x: hidden; margin: 0 !important; padding: 0 !important; list-style: none; } .woocommerce div.product.cnbl-sp .woocommerce-product-gallery .flex-control-thumbs li { float: none !important; width: 100% !important; margin: 0 !important; } .woocommerce div.product.cnbl-sp .woocommerce-product-gallery .flex-control-thumbs img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #111111; border: 2px solid #d9d9d9; border-radius: 8px; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .woocommerce div.product.cnbl-sp .woocommerce-product-gallery .flex-control-thumbs img.flex-active { border-color: #e8e8e8; box-shadow: none; } .woocommerce div.product.cnbl-sp .woocommerce-product-gallery__wrapper img { width: 100%; height: 100% !important; max-height: none; /* Rellenar el frame del producto y evitar franjas negras laterales. */ object-fit: cover; object-position: 50% 50%; transition: none; border-radius: 14px !important; background: transparent; } @media (max-width: 1024px) { .woocommerce div.product.cnbl-sp .cnbl-sp__inner { grid-template-columns: 1fr; gap: 22px; } .woocommerce div.product.cnbl-sp .woocommerce-product-gallery, .woocommerce div.product.cnbl-sp .woocommerce-product-gallery:has(.flex-control-thumbs) { padding-left: 0; } .woocommerce div.product.cnbl-sp .woocommerce-product-gallery .flex-control-thumbs { position: static; width: 100%; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px !important; margin-top: 12px !important; } .woocommerce div.product.cnbl-sp .woocommerce-product-gallery .flex-control-thumbs li { width: 68px !important; min-width: 68px; } .woocommerce div.product.cnbl-sp .woocommerce-product-gallery .woocommerce-product-gallery__image a { aspect-ratio: 1 / 1; } } @media (max-width: 768px) { .single-product .site-main { padding-top: 20px; } .cnbl-single-hero { padding: 18px 0 16px; } .cnbl-single-hero__inner { width: min(1200px, calc(100% - 24px)); } .cnbl-single-hero__eyebrow { font-size: 22px; margin-bottom: 8px; } .cnbl-single-hero__heading { font-size: clamp(42px, 10vw, 58px); } } /* Breadcrumb: espaciado superior para que no quede pegado al header */ .woocommerce-breadcrumb { padding: 1.9rem 0 0.55rem; font-size: 13px; color: #888; } .woocommerce-breadcrumb a { color: #888; text-decoration: none; } .woocommerce-breadcrumb a:hover { color: #BE1A42; } /* Título del producto: color negro puro en lugar del default grisáceo */ .woocommerce div.product h1.product_title { color: #111111 !important; font-size: 2rem; font-weight: 800; letter-spacing: -0.01em; } /* Precio en la página de producto */ .woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.5rem; font-weight: 700; color: #BE1A42 !important; } /* Labels de campos del formulario de producto */ .woocommerce div.product form.cart .wc-pao-addon-name, .woocommerce div.product .wc-pao-addon-wrap label { font-weight: 600; font-size: 13px; color: #111111; margin-bottom: 2px; } /* Textos descriptivos/helper en itálica: mejor contraste */ .woocommerce div.product .wc-pao-addon-description, .woocommerce div.product .wc-pao-addon-wrap p.wc-pao-addon-description { font-style: italic; font-size: 12px; color: #666666; margin-bottom: 6px; } /* Heading "Others" (sección de add-ons): reducir tamaño */ .woocommerce div.product .wc-pao-addon-heading, .woocommerce div.product .wc-pao-group-name { font-size: 1rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em; color: #111111 !important; border-bottom: 2px solid #BE1A42; padding-bottom: 6px !important; margin-bottom: 1rem !important; margin-top: 1.5rem !important; } /* Selects y inputs del formulario de producto: estilo coherente */ .woocommerce div.product form.cart select, .woocommerce div.product form.cart input[type="text"], .woocommerce div.product form.cart input[type="number"], .woocommerce div.product form.cart textarea { border: 1px solid #dddddd; border-radius: 4px; padding: 8px 12px; font-size: 14px; color: #111111; background-color: #ffffff; width: 100%; box-sizing: border-box; transition: border-color 0.2s ease; } .woocommerce div.product form.cart select:focus, .woocommerce div.product form.cart input[type="text"]:focus, .woocommerce div.product form.cart textarea:focus { border-color: #BE1A42; outline: none; box-shadow: 0 0 0 2px rgba(190, 26, 66, 0.12); } /* Color Scheme UI (picker + swatch + HEX + descripcion) */ .woocommerce div.product .wc-pao-addon-wrap .cnbl-color-scheme-ui { display: grid; grid-template-columns: 118px minmax(90px, max-content) minmax(180px, 1fr); gap: 10px; align-items: center; margin-top: 8px; position: relative; } .woocommerce div.product .wc-pao-addon-wrap .cnbl-color-scheme-ui__picker { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .woocommerce div.product .wc-pao-addon-wrap .cnbl-color-scheme-ui__trigger { --cnbl-picked-color: #be1a42; display: inline-flex; align-items: center; justify-content: center; height: 40px; border: 1px solid #cfcfcf; border-radius: 8px; background: linear-gradient(0deg, rgba(255,255,255,0.12), rgba(255,255,255,0.12)), var(--cnbl-picked-color); color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; padding: 0 10px; transition: filter 0.2s ease, transform 0.2s ease; } .woocommerce div.product .wc-pao-addon-wrap .cnbl-color-scheme-ui__trigger:hover { filter: brightness(0.94); } .woocommerce div.product .wc-pao-addon-wrap .cnbl-color-scheme-ui__trigger:focus-visible { outline: 2px solid #be1a42; outline-offset: 2px; } .woocommerce div.product .wc-pao-addon-wrap .cnbl-color-scheme-ui__hex { display: none; } .woocommerce div.product .wc-pao-addon-wrap .cnbl-color-scheme-ui__desc { min-width: 0; } @media (max-width: 768px) { .woocommerce div.product .wc-pao-addon-wrap .cnbl-color-scheme-ui { grid-template-columns: 1fr 1fr; grid-template-areas: "trigger hex" "desc desc desc"; } .woocommerce div.product .wc-pao-addon-wrap .cnbl-color-scheme-ui__trigger { grid-area: trigger; } .woocommerce div.product .wc-pao-addon-wrap .cnbl-color-scheme-ui__hex { grid-area: hex; } .woocommerce div.product .wc-pao-addon-wrap .cnbl-color-scheme-ui__desc { grid-area: desc; } } /* Botón "Add to cart": alineado con el sistema de botones del tema */ .woocommerce div.product form.cart .single_add_to_cart_button.button { background-color: #BE1A42 !important; color: #ffffff !important; border: 2px solid #BE1A42 !important; border-radius: 4px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; padding: 14px 28px !important; width: 100% !important; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease !important; } .woocommerce div.product form.cart .single_add_to_cart_button.button:hover { background-color: #9B1535 !important; border-color: #9B1535 !important; } /* Quantity input */ .woocommerce div.product form.cart .quantity input.qty { border: 1px solid #dddddd; border-radius: 4px; text-align: center; font-size: 14px; font-weight: 600; color: #111111; padding: 8px 4px; width: 64px; } /* Nota de precio debajo del botón: más visibilidad */ .woocommerce div.product .woocommerce-product-details__short-description p, .woocommerce div.product form.cart + p, .woocommerce div.product .product-info-note { font-size: 12px; color: #555555; background: #fff8e1; border-left: 3px solid #BE1A42; padding: 8px 12px; margin-top: 0.75rem; border-radius: 0 4px 4px 0; } /* --------------------------------------------------------------- CARRITO --------------------------------------------------------------- */ /* Opciones de add-ons en la tabla del carrito: fuente más pequeña para reducir el tamaño vertical de filas con muchas opciones */ .woocommerce-cart table.cart td .wc-item-meta, .woocommerce-cart table.cart td dl.variation, .woocommerce-cart table.cart td .product-addon-cart-item-data { font-size: 11px !important; color: #777777 !important; margin-top: 4px !important; line-height: 1.5 !important; } .woocommerce-cart table.cart td dl.variation dt, .woocommerce-cart table.cart td dl.variation dd { font-size: 11px !important; margin: 0 !important; color: #777777 !important; } /* Nombre del producto en el carrito: negrita y negro */ .woocommerce-cart table.cart td.product-name a { font-weight: 700; color: #111111; text-decoration: none; } .woocommerce-cart table.cart td.product-name a:hover { color: #BE1A42; } /* Caja "Cart totals": quitar border negro default, aplicar estilo limpio. El borde 3px solid #1b1919 viene del container Elementor del widget jet-cart-totals */ .woocommerce .cart-collaterals .cart_totals, .woocommerce-cart .cart-collaterals .cart_totals { border: 1px solid #e5e5e5 !important; border-radius: 8px !important; padding: 1.5rem !important; background: #fafafa !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; } /* Container Elementor del widget jet-cart-totals: reemplaza borde negro de Elementor */ .elementor-element-8b0d1a0, .elementor-widget-jet-cart-totals, .woocommerce-cart .elementor-element:has(.jet-cart-totals) { border: 1px solid #e5e5e5 !important; border-radius: 8px !important; background-color: #fafafa !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; overflow: hidden; } .woocommerce .cart-collaterals .cart_totals h2 { font-size: 1.15rem !important; font-weight: 800 !important; color: #111111 !important; margin-bottom: 1rem !important; text-transform: uppercase; letter-spacing: 0.05em; } /* Filas de la tabla del resumen del carrito */ .woocommerce .cart_totals table.shop_table { border: none !important; } /* Botón "Proceed to checkout" */ .woocommerce .cart_totals .checkout-button, .woocommerce .wc-proceed-to-checkout a.checkout-button { background-color: #BE1A42 !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; font-weight: 700 !important; font-size: 15px !important; text-transform: uppercase; letter-spacing: 0.05em; padding: 14px 24px !important; width: 100% !important; display: block !important; text-align: center !important; transition: background-color 0.2s ease !important; } .woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background-color: #9B1535 !important; } /* Botones "Apply Coupon" y "Update Cart": border-radius coherente */ .woocommerce-cart .cart .button, .woocommerce-cart .coupon .button { border-radius: 4px !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.03em; text-transform: uppercase; } /* Campo cupón */ .woocommerce-cart .coupon input#coupon_code { border: 1px solid #dddddd; border-radius: 4px; padding: 10px 14px; font-size: 13px; min-width: 180px; color: #111111; } .woocommerce-cart .coupon input#coupon_code:focus { border-color: #BE1A42; outline: none; } /* Nota asterisco depósito: más visibilidad */ .woocommerce-cart-form + p, .woocommerce-cart .cart-collaterals + p { font-size: 12px; color: #555555; background: #fff8e1; border-left: 3px solid #BE1A42; padding: 8px 12px; border-radius: 0 4px 4px 0; margin-top: 1rem; } /* =============================================================== CHECKOUT — WooCommerce Block Checkout Espeja el diseño del cart: layout 2 columnas + sidebar card =============================================================== */ /* ------------------------------------------------------------------ 1. LAYOUT PRINCIPAL — centrado, max-width, gap limpio ------------------------------------------------------------------ */ /* Wrapper de página: limita ancho y centra */ .woocommerce-checkout .page-content, .woocommerce-checkout .entry-content { max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* El bloque checkout de Gutenberg — grid en lugar de flex para evitar wrap */ .wc-block-components-sidebar-layout.wc-block-checkout { display: grid !important; grid-template-columns: 1fr 360px !important; gap: 24px !important; align-items: start !important; max-width: 1160px !important; width: 100% !important; margin: 48px auto !important; padding: 0 24px !important; box-sizing: border-box !important; flex-wrap: nowrap !important; } /* Columna izquierda */ .wc-block-checkout__main { padding-right: 0 !important; min-width: 0 !important; grid-column: 1 !important; grid-row: 1 !important; } /* Columna derecha — card igual al cart sidebar */ .wc-block-checkout__sidebar { padding: 28px !important; background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important; min-width: 0 !important; width: auto !important; flex: none !important; grid-column: 2 !important; grid-row: 1 !important; position: sticky !important; top: 100px !important; align-self: start !important; } /* La caja de order summary dentro del sidebar */ .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; } /* ------------------------------------------------------------------ 2. TÍTULO "Order summary" — igual a "Summary" del cart ------------------------------------------------------------------ */ .wc-block-components-checkout-order-summary__title { font-size: 18px !important; font-weight: 700 !important; color: #111111 !important; margin: 0 0 8px !important; padding-bottom: 12px !important; border-bottom: 0 !important; letter-spacing: -0.01em !important; text-transform: none !important; } /* Título "Order Summary" — igual al "Summary" del cart */ .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title { display: block !important; font-size: 18px !important; font-weight: 700 !important; color: #111111 !important; margin: 0 0 20px !important; padding-bottom: 16px !important; border-bottom: 1px solid #eeeeee !important; letter-spacing: -0.01em !important; text-transform: none !important; } /* Ocultar título duplicado del bloque interno (WC usa 2 elementos) */ .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block > .wc-block-components-title, .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block h2.wc-block-components-title, .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block h3.wc-block-components-title { display: none !important; } /* Unificar contenedor interno del Summary (sin caja anidada) */ .wc-block-checkout__sidebar .wc-block-components-order-summary, .wc-block-checkout__sidebar .wc-block-components-checkout-step, .wc-block-checkout__sidebar .wc-block-components-panel, .wc-block-checkout__sidebar .checkout-order-summary-block-fill { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* ------------------------------------------------------------------ 3. ITEMS DEL ORDEN — miniaturas de producto en el sidebar ------------------------------------------------------------------ */ /* Mostrar description (contiene el nombre del producto) */ .wc-block-components-order-summary-item__description { display: flex !important; flex-direction: column !important; gap: 2px !important; flex: 1 !important; min-width: 0 !important; } /* Nombre del producto */ .wc-block-components-order-summary-item__description .wc-block-components-product-name { font-size: 13px !important; font-weight: 400 !important; color: #111111 !important; margin: 0 !important; line-height: 1.35 !important; } /* Opciones / addons del producto */ .wc-block-components-order-summary-item__description .wc-block-components-product-metadata { font-size: 11px !important; color: #888888 !important; margin: 0 !important; line-height: 1.4 !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } .wc-block-components-order-summary-item__description .wc-block-components-product-metadata__item { display: inline !important; } /* Precio unitario duplicado — ya se muestra en .total-price a la derecha */ .wc-block-components-order-summary-item__description .wc-block-cart-item__prices { display: none !important; } /* Imagen cuadrada: igual a los thumbnails del cart */ .wc-block-components-order-summary-item__image { width: 64px !important; min-width: 64px !important; height: 64px !important; flex-shrink: 0 !important; border-radius: 6px !important; overflow: hidden !important; } .wc-block-components-order-summary-item__image img { width: 64px !important; height: 64px !important; max-width: none !important; object-fit: cover !important; border-radius: 6px !important; display: block !important; } /* Fila de item: espaciado limpio */ .wc-block-components-order-summary-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 0 !important; border-bottom: 0 !important; } .wc-block-components-order-summary-item:last-child { border-bottom: none !important; } /* Precio total del item: alineado a la derecha */ .wc-block-components-order-summary-item__total-price { margin-left: auto !important; font-weight: 400 !important; font-size: 13px !important; color: #111111 !important; white-space: nowrap !important; } /* Badge de cantidad sobre la imagen */ .wc-block-components-order-summary-item .wc-block-components-order-summary-item__quantity { font-size: 11px !important; font-weight: 700 !important; } .wc-block-components-order-summary-item__individual-prices { color: #888888 !important; font-size: 12px !important; } /* ------------------------------------------------------------------ 4. TOTALS — subtotal, shipping, total (igual al sidebar del cart) ------------------------------------------------------------------ */ .wc-block-checkout__sidebar .wc-block-components-totals-item { justify-content: space-between !important; padding: 9px 0 !important; border: 0 !important; box-shadow: none !important; font-size: 13px !important; } .wc-block-checkout__sidebar .wc-block-components-totals-item__label { font-weight: 400 !important; color: #4b5563 !important; font-size: 13px !important; } .wc-block-checkout__sidebar .wc-block-components-totals-item__value { font-weight: 400 !important; color: #111111 !important; font-size: 13px !important; } /* Fila de subtotal: borde inferior */ .wc-block-checkout__sidebar .wc-block-components-totals-subtotal { border: 0 !important; padding-bottom: 6px !important; margin-bottom: 0 !important; } /* Fila de total: borde superior + texto más grande */ .wc-block-checkout__sidebar .wc-block-components-totals-footer-item { border-top: 0 !important; padding-top: 14px !important; margin-top: 2px !important; } .wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: #111111 !important; font-size: 14px !important; font-weight: 400 !important; } .wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 15px !important; font-weight: 400 !important; color: #111111 !important; } /* Checkout summary clean: evita líneas duplicadas de bloques internos */ .wc-block-checkout__sidebar .wc-block-components-totals-item, .wc-block-checkout__sidebar .wc-block-components-panel, .wc-block-checkout__sidebar .wc-block-components-totals-coupon, .wc-block-checkout__sidebar .wc-block-components-totals-shipping, .wc-block-checkout__sidebar .wc-block-components-totals-shipping__change-address, .wc-block-checkout__sidebar .wc-block-components-order-summary-item { border-top: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important; } .wc-block-checkout__sidebar .wc-block-components-order-summary-item { border-top: 0 !important; } .wc-block-checkout__sidebar hr, .wc-block-checkout__sidebar .wc-block-components-divider { display: none !important; } .wc-block-checkout__sidebar *::before, .wc-block-checkout__sidebar *::after { border-top: 0 !important; border-bottom: 0 !important; } /* Descuentos en verde */ .wc-block-checkout__sidebar .wc-block-components-totals-coupon-code__amount { color: #28a745 !important; } /* Shipping text */ .wc-block-checkout__sidebar .wc-block-components-totals-shipping__via { color: #6b7280 !important; font-size: 12px !important; } /* Cupón — input + botón */ .wc-block-checkout__sidebar .wc-block-components-totals-coupon .wc-block-components-totals-coupon__button { appearance: none !important; background: #111111 !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; cursor: pointer !important; } .wc-block-checkout__sidebar .wc-block-components-totals-coupon .wc-block-components-totals-coupon__button:hover { background: #333333 !important; } /* ------------------------------------------------------------------ 5. STEP HEADINGS — secciones del formulario ------------------------------------------------------------------ */ .wc-block-checkout__main .wc-block-components-checkout-step__heading { font-size: 13px !important; font-weight: 700 !important; color: #111111 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; padding-bottom: 12px !important; border-bottom: 1px solid #eeeeee !important; margin-bottom: 16px !important; } .wc-block-checkout__main .wc-block-components-checkout-step__heading-step-number { display: none !important; } /* ------------------------------------------------------------------ 6. INPUTS — focus color de marca ------------------------------------------------------------------ */ .wc-block-components-text-input.is-active:not(.has-error) .wc-block-components-text-input__input, .wc-block-components-text-input:focus-within:not(.has-error) .wc-block-components-text-input__input { border-color: #BE1A42 !important; box-shadow: 0 0 0 2px rgba(190, 26, 66, 0.1) !important; outline: none !important; } .wc-block-components-text-input:focus-within label, .wc-block-components-text-input.is-active label { color: #BE1A42 !important; } .wc-block-components-select:focus-within select, .wc-block-components-country-input:focus-within input { border-color: #BE1A42 !important; outline: none !important; } /* ------------------------------------------------------------------ 7. BOTÓN "Place Order" — igual a "PROCEED TO CHECKOUT" del cart ------------------------------------------------------------------ */ .wc-block-components-checkout-place-order-button, .wc-block-checkout__actions .wc-block-components-button.wc-block-components-checkout-place-order-button { display: block !important; width: 100% !important; background-color: #BE1A42 !important; color: #ffffff !important; text-align: center !important; padding: 15px 24px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; border: none !important; cursor: pointer !important; transition: background-color 0.2s ease !important; appearance: none !important; box-sizing: border-box !important; justify-content: center !important; } /* Fuerza centrado del label interno en WooCommerce Blocks */ .wc-block-checkout__actions .wc-block-components-button.wc-block-components-checkout-place-order-button, .wc-block-checkout__actions .wc-block-components-checkout-place-order-button { display: flex !important; align-items: center !important; justify-content: center !important; } .wc-block-checkout__actions .wc-block-components-button__text, .wc-block-checkout__actions .wc-block-components-checkout-place-order-button__text, .wc-block-checkout__actions .wc-block-components-button span { width: 100% !important; text-align: center !important; justify-content: center !important; } .wc-block-components-checkout-place-order-button:hover { background-color: #9B1535 !important; } .wc-block-components-checkout-place-order-button:disabled { background-color: #d1d5db !important; cursor: not-allowed !important; } /* ------------------------------------------------------------------ 8. "Return to Cart" y actions bar ------------------------------------------------------------------ */ /* La fila interna que contiene Return to Cart + Place Order */ .wc-block-checkout__actions_row { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Contenedor completo de acciones dentro de Summary */ .wc-block-checkout__actions { display: flex !important; flex-direction: column !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Place Order primero (orden visual) */ .wc-block-components-checkout-place-order-button { order: 1 !important; margin-bottom: 0 !important; } .wc-block-checkout__actions .wc-block-checkout__terms, .wc-block-checkout__actions .wc-block-components-checkout-terms, .wc-block-checkout__actions .wc-block-components-checkout-terms__text { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Texto de términos en medio */ .wc-block-checkout__actions .wc-block-checkout__terms, .wc-block-checkout__actions .wc-block-components-checkout-terms { order: 2 !important; } /* Return to Cart — centrado, debajo del botón */ .wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button { order: 3 !important; color: #888888 !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; transition: color 0.2s ease !important; width: 100% !important; padding: 4px 0 !important; } /* Fallback: cualquier link/botón de volver al carrito va al final */ .wc-block-checkout__actions a[href*="/cart"], .wc-block-checkout__actions a[href*="cart"] { order: 3 !important; } /* Oculta Return to cart en checkout */ .wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button, .wc-block-checkout__actions a[href*="/cart"], .wc-block-checkout__actions a[href*="cart"] { display: none !important; } .wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button:hover { color: #BE1A42 !important; } /* ------------------------------------------------------------------ 9. TERMS & CONDITIONS ------------------------------------------------------------------ */ .wc-block-checkout__terms a, .wc-block-components-checkout-terms__checkbox a { color: #BE1A42 !important; text-decoration: underline; } .wc-block-checkout__terms a:hover, .wc-block-components-checkout-terms__checkbox a:hover { color: #9B1535 !important; } /* ------------------------------------------------------------------ 10. AVISOS / NOTICES ------------------------------------------------------------------ */ .wc-block-checkout .wc-block-components-notice-banner, .wc-block-checkout .wc-block-components-notice-banner.is-error { border-radius: 8px !important; font-size: 13px !important; margin-bottom: 12px !important; } /* ------------------------------------------------------------------ 11. RESPONSIVE ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ 12. RESPONSIVE — Checkout Block ------------------------------------------------------------------ */ /* Tablet: ≤960px → columna única, sidebar abajo */ @media (max-width: 960px) { .wc-block-components-sidebar-layout.wc-block-checkout { grid-template-columns: 1fr !important; margin: 32px auto !important; gap: 0 !important; } /* Resetear asignaciones de columna/fila */ .wc-block-checkout__main { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; padding-right: 0 !important; } .wc-block-checkout__sidebar { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; min-width: 0 !important; position: static !important; top: auto !important; flex: none !important; /* Card mantiene su propio borde — sin border-top extra */ margin-top: 32px !important; box-sizing: border-box !important; } /* El bloque interno sigue transparente; el card está en el sidebar */ .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { width: 100% !important; box-sizing: border-box !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } /* Botón Place Order: asegurar full-width */ .wc-block-components-checkout-place-order-button { width: 100% !important; box-sizing: border-box !important; } } /* Mobile pequeño: ≤600px */ @media (max-width: 600px) { .wc-block-components-sidebar-layout.wc-block-checkout { padding: 0 16px !important; margin: 12px auto !important; gap: 0 !important; } /* Reduce el padding-top del wrapper externo de WooCommerce */ .wp-block-woocommerce-checkout { padding-top: 8px !important; } /* Step headings: font más pequeño */ .wc-block-checkout__main .wc-block-components-checkout-step__heading { font-size: 12px !important; } /* Sidebar card: mismo padding que desktop (estandarizado) */ .wc-block-checkout__sidebar { margin-top: 24px !important; } /* Evita cualquier desborde lateral en checkout mobile */ .woocommerce-checkout, .woocommerce-checkout .site-content, .woocommerce-checkout .site-main, .woocommerce-checkout #primary, .woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout, .woocommerce-checkout .wc-block-checkout__main, .woocommerce-checkout .wc-block-checkout__sidebar { max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .woocommerce-checkout .wc-block-components-form, .woocommerce-checkout .wc-block-components-form * { max-width: 100% !important; box-sizing: border-box !important; } } /* Mobile angosto: ≤480px → campos de dirección apilados */ @media (max-width: 480px) { /* Address form: una columna */ .wc-block-checkout__main .wc-block-components-address-form { display: grid !important; grid-template-columns: 1fr !important; } .wc-block-components-address-form__first_name, .wc-block-components-address-form__last_name, .wc-block-components-address-form__city, .wc-block-components-address-form__state, .wc-block-components-address-form__postcode, .wc-block-components-address-form__phone { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; } /* Deposit upload: botón + nombre en columna */ .cnbl-deposit-upload__label-btn { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; } .cnbl-deposit-upload__fname { padding-left: 0 !important; } /* Step headings aún más compactos */ .wc-block-checkout__main .wc-block-components-checkout-step__heading { font-size: 11px !important; letter-spacing: 0.05em !important; } /* Totals en sidebar: texto más pequeño */ .wc-block-checkout__sidebar .wc-block-components-totals-item__label, .wc-block-checkout__sidebar .wc-block-components-totals-item__value { font-size: 12px !important; } } /* ============================================================= SHOP — UX UPGRADE: Micro-interacciones & best practices 2026 ============================================================= */ /* ---------------------------------------------------------- 1. CARD — Elevation lift + transición suave ---------------------------------------------------------- */ .jet-woo-products__inner-box { background: #ffffff !important; border: none !important; border-radius: 12px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07) !important; overflow: hidden !important; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important; } .jet-woo-products__inner-box:hover { transform: translateY(-5px) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.13) !important; } /* ---------------------------------------------------------- 2. IMAGEN — Zoom suave en hover ---------------------------------------------------------- */ .jet-woo-products__thumb-wrap { overflow: hidden !important; border-radius: inherit; } .jet-woo-product-thumbnail { overflow: hidden !important; } .jet-woo-product-thumbnail img { transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; will-change: transform; } .jet-woo-products__inner-box:hover .jet-woo-product-thumbnail img { transform: scale(1.05) !important; } /* ---------------------------------------------------------- 3. OVERLAY — Scrim sutil en hover para dar profundidad ---------------------------------------------------------- */ .jet-woo-product-img-overlay { background: transparent !important; transition: background 0.35s ease !important; z-index: 2 !important; pointer-events: none !important; } .jet-woo-products__inner-box:hover .jet-woo-product-img-overlay { background: rgba(17, 25, 38, 0.07) !important; } /* ---------------------------------------------------------- 4. CONTENT AREA — Padding y layout interno ---------------------------------------------------------- */ .jet-woo-products--preset-3 .jet-woo-products__item .jet-woo-products__item-content { padding: 12px 16px 16px !important; background: #ffffff !important; } /* ---------------------------------------------------------- 5. CATEGORÍAS — Muted, uppercase, letter-spaced ---------------------------------------------------------- */ .jet-woo-product-categories, .jet-woo-products--preset-3 .jet-woo-products__item-content .jet-woo-product-categories { font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: #BE1A42 !important; margin-bottom: 5px !important; line-height: 1.3 !important; } .jet-woo-product-categories a, .jet-woo-product-categories ul li a { color: #BE1A42 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .jet-woo-product-categories a:hover, .jet-woo-product-categories ul li a:hover { color: #9B1535 !important; } .jet-woo-product-categories .separator { color: rgba(190, 26, 66, 0.4) !important; margin: 0 2px !important; } /* ---------------------------------------------------------- 6. TÍTULO — Jerarquía clara, hover de color ---------------------------------------------------------- */ h5.jet-woo-product-title, .jet-woo-product-title { font-size: 12px !important; font-weight: 800 !important; color: #111111 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; line-height: 1.35 !important; margin: 0 0 8px !important; } h5.jet-woo-product-title a, .jet-woo-product-title a { color: #111111 !important; text-decoration: none !important; transition: color 0.22s ease !important; } h5.jet-woo-product-title a:hover, .jet-woo-product-title a:hover { color: #BE1A42 !important; } /* ---------------------------------------------------------- 7. PRECIO — "Starting at" prefix + estilo marca ---------------------------------------------------------- */ .jet-woo-product-price { margin-bottom: 0 !important; line-height: 1.4 !important; } .jet-woo-product-price .price, .jet-woo-product-price span.price { font-size: 13px !important; font-weight: 700 !important; color: #BE1A42 !important; letter-spacing: 0.01em !important; display: block !important; } .jet-woo-product-price .price::before { content: "Starting at"; display: block !important; font-size: 9px !important; font-weight: 500 !important; color: #999999 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; margin-bottom: 2px !important; } /* ---------------------------------------------------------- 8. CTA BUTTON — Slide-up + timing mejorado El preset-3 de Jet ya gestiona opacity: 0→1 en :hover. Añadimos el slide-up con translateY. ---------------------------------------------------------- */ .jet-woo-products--preset-3 .jet-woo-products__item .jet-woo-products__item-content .hovered-content { transition: opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1), transform 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important; transform: translateY(8px) !important; } .jet-woo-products--preset-3 .jet-woo-products__item:hover .jet-woo-products__item-content .hovered-content { transform: translateY(0) !important; } .jet-woo-product-button a.button, .jet-woo-products .add_to_cart_button { display: block !important; width: 100% !important; text-align: center !important; background-color: #BE1A42 !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; padding: 10px 16px !important; transition: background-color 0.18s ease, transform 0.15s ease !important; } .jet-woo-product-button a.button:hover, .jet-woo-products .add_to_cart_button:hover { background-color: #9B1535 !important; transform: scale(1.02) !important; } /* ---------------------------------------------------------- 9. FILTER DROPDOWN — Estilizado y coherente con la marca ---------------------------------------------------------- */ .woocommerce .widget_product_categories select, .woocommerce .widget select, .woocommerce-widget-layered-nav select { appearance: none; -webkit-appearance: none; border: 1px solid #e0e0e0 !important; border-radius: 6px !important; padding: 9px 36px 9px 12px !important; font-size: 13px !important; color: #333333 !important; background-color: #ffffff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; cursor: pointer; width: 100% !important; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .woocommerce .widget_product_categories select:focus, .woocommerce .widget select:focus { border-color: #BE1A42 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(190, 26, 66, 0.1) !important; } .woocommerce .widget_product_categories select:hover, .woocommerce .widget select:hover { border-color: #cccccc !important; } /* Heading "Surfboard Categories" */ .widget_product_categories .widgettitle, .widget_layered_nav .widgettitle { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: #888888 !important; margin-bottom: 8px !important; } /* ---------------------------------------------------------- 10. ACCESIBILIDAD — Focus ring para navegación por teclado ---------------------------------------------------------- */ .jet-woo-products__inner-box:focus-within { outline: 2px solid #BE1A42; outline-offset: 2px; border-radius: inherit; } .jet-woo-product-button a.button:focus-visible { outline: 2px solid #BE1A42 !important; outline-offset: 2px !important; } /* ---------------------------------------------------------- 11. PÁGINA DE PRODUCTO — UX refinements ---------------------------------------------------------- */ /* Separador sutil entre imagen y formulario */ .woocommerce div.product .summary { padding-left: 2rem; } /* Espaciado vertical consistente entre campos */ .woocommerce div.product .wc-pao-addon-wrap { margin-bottom: 1rem; } /* Checkboxes y radio buttons: más visual */ .woocommerce div.product form.cart input[type="checkbox"] { accent-color: #BE1A42; width: 15px; height: 15px; cursor: pointer; margin-right: 6px; } /* Nota de precio: estilo info-callout */ .woocommerce div.product .woocommerce-product-details__short-description { border-left: 3px solid #e8e8e8; padding-left: 12px; color: #555; font-size: 13px; line-height: 1.6; margin-bottom: 1.25rem; } /* ---------------------------------------------------------- 12. CARRITO — Tipografía y jerarquía de la tabla ---------------------------------------------------------- */ /* Header de tabla: más peso y claridad */ .woocommerce-cart table.shop_table thead th { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #888888 !important; border-bottom: 2px solid #eeeeee !important; padding: 10px 12px !important; } /* Nombre del producto: negro, bold */ .woocommerce-cart table.cart td.product-name a { font-weight: 700 !important; font-size: 13px !important; color: #111111 !important; text-decoration: none !important; letter-spacing: 0.02em; } .woocommerce-cart table.cart td.product-name a:hover { color: #BE1A42 !important; } /* Precio y total: coherente */ .woocommerce-cart table.shop_table .amount { font-weight: 700 !important; color: #111111 !important; } /* X de eliminar: más visible */ .woocommerce-cart table.cart td.product-remove a { color: #cccccc !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1 !important; transition: color 0.2s ease !important; } .woocommerce-cart table.cart td.product-remove a:hover { color: #BE1A42 !important; } /* ---------------------------------------------------------- 13. CHECKOUT — Inputs refinados ---------------------------------------------------------- */ .wc-block-components-text-input input, .wc-block-components-select select, .wc-block-components-combobox input { border-radius: 6px !important; border-color: #e0e0e0 !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .wc-block-components-text-input input:focus, .wc-block-components-select select:focus, .wc-block-components-combobox input:focus { outline: none !important; border-color: #BE1A42 !important; box-shadow: 0 0 0 3px rgba(190, 26, 66, 0.15) !important; } /* ============================================================= SHOP — FIGMA HYBRID: Sección shop, sidebar, título, responsive ============================================================= */ /* Fondo levemente gris para la sección de productos (Figma: #f4f5f7) */ .woocommerce-shop .site-content, .post-type-archive-product .site-content, .woocommerce-shop main, .post-type-archive-product main { background-color: #f5f6f8; } /* Shop page title: estilo "SURFBOARDS / BROWSE CATEGORIES" del Figma */ .woocommerce-shop .page-title, .woocommerce-shop h1.page-title, .post-type-archive-product h1.page-title { font-size: 1.75rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: #111111 !important; margin-bottom: 1.5rem !important; } .woocommerce-shop .page-title::before, .post-type-archive-product h1.page-title::before { content: "SURFBOARDS"; display: block !important; font-size: 11px !important; font-weight: 700 !important; color: #BE1A42 !important; letter-spacing: 0.15em !important; margin-bottom: 4px !important; } /* Sidebar widget "Surfboard Categories": transformar en bloque limpio */ .widget_product_categories, .woocommerce-widget-layered-nav { background: #ffffff; border-radius: 8px; padding: 16px !important; box-shadow: 0 1px 6px rgba(0,0,0,0.06); margin-bottom: 1.5rem !important; } /* Select dropdown de categorías: más prominente */ .widget_product_categories select { width: 100% !important; padding: 10px 36px 10px 14px !important; border: 1.5px solid #e0e0e0 !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 500 !important; color: #333333 !important; background-color: #ffffff !important; cursor: pointer; } /* Thumb-wrap: border-radius para imagen con clip superior */ .jet-woo-products__thumb-wrap { border-radius: 12px 12px 0 0 !important; overflow: hidden !important; background: #ffffff !important; } /* Mantener proporción vertical consistente en todos los devices */ .jet-woo-product-thumbnail { aspect-ratio: 3 / 4; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background-color: #ffffff !important; } .jet-woo-product-thumbnail img { width: auto !important; height: auto !important; max-width: 82% !important; max-height: 88% !important; object-fit: contain !important; object-position: center center !important; background: linear-gradient(to top, #FFFFFF 0%, #F2F2F2 100%) !important; padding: 16px 12px 12px !important; box-sizing: border-box !important; } /* Evita corte superior al hacer hover en tarjetas del shop */ .jet-woo-products__inner-box:hover .jet-woo-product-thumbnail img { transform: none !important; } /* Título card: ligeramente más grande para legibilidad */ h5.jet-woo-product-title, .jet-woo-product-title { font-size: 13px !important; margin-bottom: 6px !important; } /* --------------------------------------------------------------- RESPONSIVE — Shop grid JetWooBuilder usa --columns CSS var + flex: calc(100%/var(--columns)) Anulamos con la variable Y con flex directo por seguridad. --------------------------------------------------------------- */ /* Tablet (≤1024px): 2 columnas */ @media (max-width: 1024px) { .col-row.jet-woo-products--preset-3 { --columns: 2; } .jet-woo-products--preset-3 .jet-woo-products__item { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; } } /* Mobile (≤768px): 1 columna */ @media (max-width: 768px) { .col-row.jet-woo-products--preset-3 { --columns: 1; } .jet-woo-products--preset-3 .jet-woo-products__item { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } .jet-woo-products__inner-box { border-radius: 10px !important; } } /* ============================================================= CNBL PRODUCTS CAROUSEL — Custom block (sin dependencias Jet) Shortcode: [cnbl_products_carousel] ============================================================= */ .cnbl-pcarousel { padding: 3rem 0 3.5rem; } /* ── Header: título izquierda + pills derecha ────────────── */ .cnbl-pcarousel__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2.5rem; margin-bottom: 1.75rem; padding: 0; max-width: 1190px; margin-left: auto; margin-right: auto; box-sizing: border-box; width: 100%; flex-wrap: wrap; } .cnbl-pcarousel__eyebrow { display: block; font-family: 'Sora', sans-serif !important; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #BE1A42; margin-bottom: 5px; } .cnbl-pcarousel__heading { font-family: 'Bebas Neue', sans-serif !important; font-size: 2rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0; color: #111111; margin: 0; line-height: 1; } /* ── Pills ───────────────────────────────────────────────── */ .cnbl-pcarousel__filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; position: relative; z-index: 12; } /* Reset de herencias globales (WC/Elementor aplican bg rojo a todos los