/* ========================================================================== Senseben — Hero Slider (bloque `hero_slider` del Home) Contenido editable desde home-admin.php (tabla home_hero_slides). Variables CSS escopadas a .hero-banner (no :root) para no chocar con el resto — el sitio real ya tiene su propia clase ".hero" (otro slider en assets/css/style.css, línea ~269), así que este bloque usa un nombre distinto para no colisionar. del sitio, que ya tiene su propia paleta en assets/css/style.css. ========================================================================== */ .hero-banner { color-scheme: light; /* Paleta OFICIAL de marca Senseben (ficha proporcionada por el cliente). */ --brand-marca: #9298ba; --brand-botones: #6f759c; --brand-fondo: #f8f9fc; --brand-contenedor: #91adba; --brand-texto-principal: #333333; --brand-texto-secundario: #8d8d8d; --brand-texto-resaltado: #9298ba; --background: var(--brand-fondo); --foreground: var(--brand-texto-principal); --muted-foreground: var(--brand-texto-secundario); --primary: var(--brand-botones); --primary-foreground: var(--brand-fondo); --secondary: color-mix(in srgb, var(--brand-contenedor) 35%, white); --ring: var(--brand-marca); --hero-line: color-mix(in srgb, var(--brand-contenedor) 40%, white); --hero-accent-text: var(--brand-texto-resaltado); --hero-shadow-color: color-mix(in srgb, var(--brand-botones) 55%, black); --accent: var(--secondary); --radius-full: 999px; /* Título = Poppins, Subtítulo/cuerpo = Montserrat (ficha de marca) — cargadas en el de index.php junto a Playfair/Inter del resto del sitio; al estar escopadas acá, no afectan el resto de la página. */ --font-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-heading: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --hero-h: 50vh; --hero-duration: 6000ms; --hero-ease: cubic-bezier(0.22, 0.61, 0.24, 1); --hero-ease-ui: ease-out; --hero-duration-ui: 160ms; --hero-duration-slide: 800ms; --hero-duration-copy: 800ms; position: relative; isolation: isolate; width: 100%; overflow: hidden; margin: 0; font-family: var(--font-sans); background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; min-height: var(--hero-h); } @media (max-width: 1024px) { .hero-banner { --hero-h: 46vh; } } @media (max-width: 640px) { .hero-banner { --hero-h: 43vh; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Progress bar ---------- */ .hero__progress { position: absolute; inset-inline: 0; top: 0; z-index: 30; height: 1px; background: var(--hero-line); } .hero__progress-bar { height: 1px; width: 0%; background: var(--primary); } /* ---------- Fondo ---------- */ .hero__canvas { position: absolute; inset: 0; z-index: -1; background-image: url("../img/home/hero-fondo-movil.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; animation: canvas-fade 8s ease-in-out infinite; } @media (min-width: 768px) and (max-width: 1023px) { .hero__canvas { background-image: url("../img/home/hero-fondo-tablet.webp"); } } @media (min-width: 1024px) { .hero__canvas { background-image: url("../img/home/hero-fondo-escritorio.webp"); } } @keyframes canvas-fade { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.05; } } .hero__canvas-gradient { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient( 160deg, color-mix(in srgb, var(--brand-marca) 10%, transparent) 0%, color-mix(in srgb, var(--brand-contenedor) 6%, transparent) 55%, color-mix(in srgb, var(--brand-fondo) 20%, transparent) 100% ); } /* ---------- Grid ---------- */ .hero__grid { position: relative; z-index: 10; margin: 0 auto; display: grid; width: 100%; max-width: 1360px; grid-template-columns: 1fr; align-items: center; gap: 1.75rem; padding: 3.5rem 1.5rem; grid-template-areas: "copy" "product"; } .hero__copy-stack { grid-area: copy; display: flex; flex-direction: column; } .hero__product { grid-area: product; } @media (max-width: 1023px) { .hero__copy-stack { display: contents; } .hero__copy-top { grid-area: top; } .hero__copy-bottom { grid-area: bottom; } .hero__actions { grid-area: actions; } .hero__grid { grid-template-areas: "top" "product" "bottom" "actions"; } .hero__eyebrow { justify-content: center; } .hero__actions { justify-content: center; } } @media (min-width: 768px) { .hero__grid { padding-inline: 2.5rem; gap: 1rem; } } @media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 2.75rem; padding-block: 0; padding-inline: 3.5rem; grid-template-areas: "copy product"; } .hero__copy-stack { padding-block: 4.25rem; } .hero-banner .btn { height: 2.5rem; } } .hero__copy-inner { transition: opacity var(--hero-duration-copy) var(--hero-ease), transform var(--hero-duration-copy) var(--hero-ease), filter var(--hero-duration-copy) var(--hero-ease); opacity: 1; transform: translateY(0); filter: blur(0); } .hero__copy-inner.is-transitioning { opacity: 0; transform: translateY(-12px); filter: blur(4px); } .hero__eyebrow { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.32em; color: var(--muted-foreground); } .hero__eyebrow-line { height: 1px; width: 2rem; background: var(--primary); flex-shrink: 0; } .hero__title { margin: 1.25rem 0 0; max-width: 100%; font-family: var(--font-heading); font-size: clamp(1.1rem, 2.2vw, 1.9rem); font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--brand-marca); } .hero__title-highlight { display: block; font-weight: 400; color: var(--hero-accent-text); } .hero__subtitle { margin: 1rem 0 0; max-width: 100%; font-size: 0.85rem; line-height: 1.4; color: var(--muted-foreground); } @media (min-width: 640px) { .hero__subtitle { font-size: 0.95rem; } } @media (max-width: 1023px) { .hero__title { text-align: center; margin-inline: auto; } .hero__subtitle { text-align: center; margin-inline: auto; } } .hero__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; opacity: 0; transform: translateY(10px); animation: hero-rise-in 900ms var(--hero-ease) 320ms forwards; } @keyframes hero-rise-in { to { opacity: 1; transform: translateY(0); } } .hero-banner .btn { display: inline-flex; align-items: center; justify-content: center; height: 2rem; padding-inline: 1.25rem; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; transition: transform var(--hero-duration-ui) var(--hero-ease-ui), background-color var(--hero-duration-ui) var(--hero-ease-ui), border-color var(--hero-duration-ui) var(--hero-ease-ui); white-space: nowrap; } .hero-banner .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .hero-banner .btn--primary { background: var(--primary); color: var(--primary-foreground); border: 1px solid transparent; } .hero-banner .btn--primary:hover { transform: scale(1.015); background: color-mix(in oklab, var(--primary) 90%, transparent); } .hero-banner .btn--outline { background: transparent; color: var(--foreground); border: 1px solid var(--hero-line); } .hero-banner .btn--outline:hover { border-color: var(--primary); background: color-mix(in oklab, var(--secondary) 60%, transparent); } @media (max-width: 479px) { .hero__actions { flex-direction: column; align-items: stretch; } .hero-banner .btn { width: 100%; } } @media (max-width: 767px) { .hero__subtitle { display: none; } .hero__copy-bottom { display: none; } .hero__grid { grid-template-areas: "top" "product" "actions"; } .hero-banner .btn--outline { display: none; } .hero-banner .btn--primary { width: auto; height: auto; background: transparent; border: none; padding-inline: 0; color: var(--foreground); } .hero-banner .btn--primary:hover { background: transparent; transform: none; } } /* ---------- Product visual ---------- */ .hero__product { position: relative; display: flex; height: max(27vh, 150px); align-items: center; justify-content: center; } @media (min-width: 640px) { .hero__product { height: max(30vh, 170px); } } @media (min-width: 768px) and (max-width: 1023px) { .hero__product { height: max(34vh, 220px); } } @media (min-width: 1024px) { .hero__product { height: var(--hero-h); } } .hero__halo { position: absolute; left: 50%; top: 50%; height: 68%; width: 68%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, oklch(0.9 0.02 240 / 0.55), transparent 72%); filter: blur(70px); } .hero__product-float { position: relative; height: 100%; width: 100%; animation: hero-float-y 7s ease-in-out infinite; } @keyframes hero-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .hero__product-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: translateX(var(--hero-drag-x, 0px)); transition: transform 380ms var(--hero-ease); } .hero-banner.is-dragging .hero__product-stage { transition: none; } .hero__product-img { position: absolute; inset: 0; margin: auto; height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px oklch(0.42 0.03 250 / 0.28)) drop-shadow(0 4px 10px oklch(0.42 0.03 250 / 0.12)); opacity: 0; transform: translateX(var(--hero-img-offset, 0px)) scale(0.96); transition: opacity var(--hero-duration-slide) var(--hero-ease), transform var(--hero-duration-slide) var(--hero-ease); } .hero__product-img.is-active { opacity: 1; transform: translateX(0) scale(1); } .hero__product-shadow { pointer-events: none; margin-inline: auto; height: 2.5rem; width: 38%; transform: translateY(-0.5rem); border-radius: 50%; background: radial-gradient(closest-side, oklch(0.55 0.02 250 / 0.28), transparent 75%); filter: blur(24px); } /* ---------- Controls ---------- */ .hero__controls { position: absolute; inset-inline: 0; bottom: 1.1rem; z-index: 20; margin-inline: auto; display: flex; width: 100%; max-width: 1360px; align-items: center; justify-content: space-between; padding-inline: 1.5rem; } @media (min-width: 768px) { .hero__controls { padding-inline: 2.5rem; } } @media (min-width: 1024px) { .hero__controls { padding-inline: 3.5rem; } } .hero__tabs { display: flex; align-items: center; gap: 0.75rem; } .hero__tab { padding-block: 0.75rem; background: none; border: none; cursor: pointer; } .hero__tab-bar { display: block; height: 1px; width: 1.5rem; background: var(--hero-line); transition: width 700ms var(--hero-ease), background-color var(--hero-duration-ui) var(--hero-ease-ui); } .hero__tab:hover .hero__tab-bar { background: var(--muted-foreground); } .hero__tab[aria-selected="true"] .hero__tab-bar { width: 3rem; background: var(--foreground); } .hero__counter { margin-left: 0.5rem; font-size: 0.75rem; font-variant-numeric: tabular-nums; letter-spacing: 0.2em; color: var(--muted-foreground); white-space: nowrap; flex-shrink: 0; } .hero__nav { display: flex; align-items: center; gap: 0.5rem; } .hero__nav-btn { display: flex; height: 2.75rem; width: 2.75rem; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--hero-line); background: transparent; color: var(--foreground); cursor: pointer; transition: none; } .hero__nav-btn:hover { border-color: var(--primary); background: color-mix(in oklab, var(--secondary) 60%, transparent); } .hero__nav-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .hero__nav-btn svg { width: 1rem; height: 1rem; } .hero__nav-btn svg[hidden] { display: none; } @media (max-width: 640px) { .hero__controls { padding-inline: 1rem; } .hero__tabs { gap: 0.4rem; } .hero__tab { padding-block: 0.5rem; } .hero__nav { gap: 0.35rem; } .hero__nav-btn { height: 2.35rem; width: 2.35rem; } .hero__nav-btn svg { width: 0.9rem; height: 0.9rem; } } /* ---------- Motion & performance preferences ---------- */ .hero-banner.is-offscreen .hero__product-float, .hero-banner.is-offscreen .hero__canvas { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .hero__product-float, .hero__canvas, .hero__actions { animation: none !important; } .hero__actions { opacity: 1; transform: none; } .hero__copy-inner, .hero__product-img, .hero__progress-bar { transition-duration: 1ms !important; } }