/** Shopify CDN: Minification failed Line 358:1 Expected "}" to go with "{" **/ /* ========================================================== DAWN 16.0.0 TRANSPARENT + STICKY HEADER — HOME ========================================================== */ /* IMPORTANTE ---------- Dawn 16.0.0 NO agrega una clase .template-index al . En este tema la home se identifica de forma fiable mediante: main[data-template="index"] Por eso todas las reglas de este archivo usan: body:has(main[data-template="index"]) */ /* ========================================================== 1. Z-INDEX DEL HEADER EN LA HOME ========================================================== */ body:has(main[data-template="index"]) .section-header { z-index: 100 !important; } /* ========================================================== 2. HEADER TRANSPARENTE SOBRE EL HERO — ANTES DEL SCROLL ========================================================== El announcement bar permanece en el flujo normal. El header comienza inmediatamente debajo de él (~58px). Se incluye .shopify-section-header-sticky en el selector para vencer la regla nativa de Dawn que aplica position: sticky. */ body:has(main[data-template="index"]) .section-header:not(.scrolled-past-header), body:has(main[data-template="index"]) .section-header.shopify-section-header-sticky:not(.scrolled-past-header) { position: absolute !important; top: 39px !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 100 !important; } /* ========================================================== 3. HEADER FIJO DESPUÉS DEL SCROLL ========================================================== Cuando Dawn añade .scrolled-past-header, el header pasa a fixed y se coloca en la parte superior de la ventana. También anulamos explícitamente la lógica de "sticky" de Dawn para que no vuelva a depender de top: 0 / top negativo del CSS nativo cuando .shopify-section-header-hidden está presente. */ body:has(main[data-template="index"]) .section-header.scrolled-past-header, body:has(main[data-template="index"]) .section-header.scrolled-past-header.shopify-section-header-sticky, body:has(main[data-template="index"]) .section-header.scrolled-past-header.shopify-section-header-hidden { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1000 !important; } /* ========================================================== 4. FONDO TRANSPARENTE SOBRE EL HERO ========================================================== */ body:has(main[data-template="index"]) .section-header:not(.scrolled-past-header) .header-wrapper { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; /* Dawn 16 usa estas variables para pintar el fondo */ --color-background: transparent !important; --gradient-background: transparent !important; } /* ========================================================== 5. TEXTO BLANCO SOBRE EL HERO ========================================================== */ body:has(main[data-template="index"]) .section-header:not(.scrolled-past-header) .header__menu-item, body:has(main[data-template="index"]) .section-header:not(.scrolled-past-header) .header__icon, body:has(main[data-template="index"]) .section-header:not(.scrolled-past-header) .header__heading-link, body:has(main[data-template="index"]) .section-header:not(.scrolled-past-header) .list-menu__item--link { color: #ffffff !important; } /* ========================================================== 6. ICONOS BLANCOS SOBRE EL HERO ========================================================== */ body:has(main[data-template="index"]) .section-header:not(.scrolled-past-header) .header__icon svg, body:has(main[data-template="index"]) .section-header:not(.scrolled-past-header) .header__icon .svg-wrapper { color: #ffffff !important; } /* ========================================================== 7. FONDO DEL HEADER DESPUÉS DEL SCROLL ========================================================== */ body:has(main[data-template="index"]) .section-header.scrolled-past-header .header-wrapper { background: rgba(255, 255, 255, 0.97) !important; background-color: rgba(255, 255, 255, 0.97) !important; background-image: none !important; /* Dawn espera valores RGB separados por comas */ --color-background: 255, 255, 255 !important; --gradient-background: #ffffff !important; border: 0 !important; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ========================================================== 8. TEXTO OSCURO DESPUÉS DEL SCROLL ========================================================== */ body:has(main[data-template="index"]) .section-header.scrolled-past-header .header__menu-item, body:has(main[data-template="index"]) .section-header.scrolled-past-header .header__icon, body:has(main[data-template="index"]) .section-header.scrolled-past-header .header__heading-link, body:has(main[data-template="index"]) .section-header.scrolled-past-header .list-menu__item--link { color: rgb(var(--color-foreground)) !important; } /* ========================================================== 9. ICONOS OSCUROS DESPUÉS DEL SCROLL ========================================================== */ body:has(main[data-template="index"]) .section-header.scrolled-past-header .header__icon svg, body:has(main[data-template="index"]) .section-header.scrolled-past-header .header__icon .svg-wrapper { color: rgb(var(--color-foreground)) !important; } /* ========================================================== 10. TRANSICIÓN VISUAL ========================================================== */ body:has(main[data-template="index"]) .section-header .header-wrapper { transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease; } /* ========================================================== 11. ELIMINAR ESPACIO SUPERIOR DEL PRIMER BANNER ========================================================== */ body:has(main[data-template="index"]) #MainContent > .shopify-section:first-child { margin-top: 0 !important; } body:has(main[data-template="index"]) #MainContent > .shopify-section:first-child .banner { margin-top: 0 !important; } /* ========================================================== 12. MOBILE ========================================================== Mantenemos la misma lógica. El announcement bar suele ocupar aproximadamente 58px en Dawn; el header queda inmediatamente debajo de él antes del scroll y pasa a top: 0 después del scroll. */ @media screen and (max-width: 749px) { body:has(main[data-template="index"]) .section-header:not(.scrolled-past-header), body:has(main[data-template="index"]) .section-header.shopify-section-header-sticky:not(.scrolled-past-header) { top: 58px !important; } body:has(main[data-template="index"]) .section-header.scrolled-past-header .header-wrapper { background: rgba(255, 255, 255, 0.98) !important; background-color: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } } /* ========================================================== 13. SEGURIDAD: NO USAR LA REGLA NATIVA DE TOP 0 ========================================================== No añadimos ni reutilizamos: .section-header.shopify-section-header-sticky { top: 0 !important; } porque en la home necesitamos 58px antes del scroll y 0px solamente después de que Dawn añada .scrolled-past-header. */ /* ========================================================== EFECTO EXTRA: HEADER BLANCO AL PASAR EL CURSOR ========================================================== */ /* HOME - cursor sobre el header */ body:has(main[data-template="index"]) .section-header:hover .header-wrapper { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; --color-background: 255, 255, 255 !important; --gradient-background: #ffffff !important; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important; } /* Texto oscuro durante el hover */ body:has(main[data-template="index"]) .section-header:hover .header__menu-item, body:has(main[data-template="index"]) .section-header:hover .header__icon, body:has(main[data-template="index"]) .section-header:hover .header__heading-link, body:has(main[data-template="index"]) .section-header:hover .list-menu__item--link { color: rgb(var(--color-foreground)) !important; } /* Iconos oscuros durante el hover */ body:has(main[data-template="index"]) .section-header:hover .header__icon svg, body:has(main[data-template="index"]) .section-header:hover .header__icon .svg-wrapper { color: rgb(var(--color-foreground)) !important; } /* Transición únicamente visual */ body:has(main[data-template="index"]) .section-header .header-wrapper { transition: background-color 0.2s ease, box-shadow 0.2s ease; } /* ========================================================== ELEMENTOS FLOTANTES DEL HEADER CUENTA / SHOPIFY ACCOUNT ========================================================== */ body:has(main[data-template="index"]) .section-header:not(.scrolled-past-header) shopify-account.header__icon { --shopify-account-color-background: #ffffff !important; --shopify-account-color-text: #121212 !important; --shopify-account-color-accent: rgb(var(--color-button)) !important; --shopify-account-color-accent-text: rgb(var(--color-button-text)) !important; /* ========================================================== SUBMENÚS DEL HEADER ========================================================== */ body:has(main[data-template="index"]) .section-header:not(.scrolled-past-header) .header__submenu { background: #ffffff !important; background-color: #ffffff !important; color: #121212 !important; } body:has(main[data-template="index"]) .section-header:not(.scrolled-past-header) .header__submenu .header__menu-item, body:has(main[data-template="index"]) .section-header:not(.scrolled-past-header) .header__submenu .header__menu-item--link { color: #121212 !important; }