/* ========================= HOME.CSS (solo index) Usa: - Full width real para HERO/SECCIONES/FOOTER - Hero, categorías, sliders, footer ========================= */ /* ajustes “premium” home */ .page-home .pCard__title{ font-weight: 900; } .page-home .pCard__kicker{ letter-spacing: .14em; font-weight: 800; } .page-home .pCard__price, .page-home .pCard__cta{ font-weight: 900; } .page-home .section__title h2{ text-transform: uppercase; font-weight: 800; letter-spacing: .08em; } /* ------------------------------------------------- 1) FULL WIDTH REAL (rompe el boxed del theme) Aplica a secciones principales del HOME (no header) --------------------------------------------------*/ .page-home .hero, .page-home .strip, .page-home .section, .page-home .footer{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } /* contenedores internos home */ .page-home .hero__slide, .page-home .section__title, .page-home .cats, .page-home .productRowWrap, .page-home .footer__inner{ width:100%; max-width:none !important; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); } /* si tu theme usa .container para encajonar */ .page-home .container{ width:100% !important; max-width:none !important; margin:0 !important; padding-left:0 !important; padding-right:0 !important; } /* ------------------------------------------------- 4) HERO (full width, texto escalable) --------------------------------------------------*/ .page-home .hero{ padding:22px 0 0; background:linear-gradient(#fff, var(--soft)); } .page-home .hero__overlay{ border-radius:28px; min-height: clamp(320px, 42vw, 460px); padding: clamp(22px, 4vw, 56px); color:#fff; box-shadow:var(--shadow); background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.25)), url("../img/hero.jpg") center/cover no-repeat; } .page-home .hero__overlay h1{ margin:0; font-size: clamp(28px, 4vw, 56px); letter-spacing:.2px; } .page-home .hero__overlay p{ margin:10px 0 18px; opacity:.92; font-weight:700; font-size: clamp(13px, 1.2vw, 16px); } .page-home .hero__cta{ display:flex; gap:12px; flex-wrap:wrap; } .page-home .btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:950; border-radius:999px; padding:12px 18px; } .page-home .btn--primary{ background:#111; color:#fff; border:1px solid #111; } .page-home .btn--ghost{ background:#fff; color:#111; border:1px solid rgba(255,255,255,.35); } /* ------------------------------------------------- 5) TITULOS DE SECCION --------------------------------------------------*/ .page-home .section{padding:28px 0} .page-home .section__title{text-align:center;margin:0 auto 18px} .page-home .section__title h2{ margin:0; font-size: clamp(20px, 2.2vw, 28px); letter-spacing:.6px; } .page-home .section__line{ width:92px; height:4px; background:#111; margin:10px auto 0; border-radius:999px; } /* ------------------------------------------------- 6) STRIP --------------------------------------------------*/ .page-home .strip{ background:var(--accent); color:#fff; font-weight:950; letter-spacing:.8px; text-transform:uppercase; } .page-home .strip__inner{ display:flex; justify-content:center; padding-top:12px; padding-bottom:12px; } /* ------------------------------------------------- 7) CATEGORÍAS (auto-fit responsive) --------------------------------------------------*/ .page-home .cats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap:16px; } .page-home .catCard{ text-decoration:none; color:#111; border:1px solid var(--border); border-radius:20px; background:#fff; overflow:hidden; box-shadow:0 12px 30px rgba(2,6,23,.06); transition:transform .15s ease, box-shadow .15s ease; } .page-home .catCard:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(2,6,23,.10); } .page-home .catCard__img{ width: 100%; aspect-ratio: 4 / 3; border-radius: 18px 18px 0 0; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; } @media (max-width: 720px){ .page-home .catCard__img{ aspect-ratio: 3 / 2; } } @media (max-width: 520px){ .page-home .catCard__img{ aspect-ratio: 1 / 1; } } .page-home .catCard__label{ padding:14px 16px; font-weight:950; text-align:center; } /* imágenes por clase */ .page-home .catCard--pantalon .catCard__img{background-image:url("../img/cat-pantalon.jpg")} .page-home .catCard--short .catCard__img{background-image:url("../img/cat-short.jpg")} .page-home .catCard--casaca .catCard__img{background-image:url("../img/cat-casaca.jpg")} .page-home .catCard--faldashort .catCard__img{background-image:url("../img/cat-falda.jpg")} .page-home .catCard--falda .catCard__img{background-image:url("../img/cat-falda.jpg")} /* ------------------------------------------------- 8) COLECCIONES --------------------------------------------------*/ .page-home .cols{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; } .page-home .colCard{ text-decoration:none; color:#0f172a; border:1px solid var(--border); border-radius:20px; background:#fff; overflow:hidden; box-shadow:0 12px 30px rgba(2,6,23,.06); padding:16px; transition:transform .15s ease, box-shadow .15s ease; position:relative; } .page-home .colCard:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(2,6,23,.10); } .page-home .colCard__title{ font-weight:950; font-size:16px; letter-spacing:-.02em; } .page-home .colCard__meta{ margin-top:6px; color:var(--muted); font-weight:800; font-size:12px; letter-spacing:.10em; text-transform:uppercase; } .page-home .colCard::before{ content:""; position:absolute; inset:0; opacity:.9; pointer-events:none; background: radial-gradient(900px 260px at 20% -20%, rgba(59,130,246,.14), transparent 55%); } .page-home .colCard > *{ position:relative; } .page-home .colCard--a::before{ background: radial-gradient(900px 260px at 20% -20%, rgba(59,130,246,.18), transparent 55%); } .page-home .colCard--b::before{ background: radial-gradient(900px 260px at 20% -20%, rgba(16,185,129,.16), transparent 55%); } .page-home .colCard--c::before{ background: radial-gradient(900px 260px at 20% -20%, rgba(245,158,11,.16), transparent 55%); } .page-home .colCard--d::before{ background: radial-gradient(900px 260px at 20% -20%, rgba(239,68,68,.14), transparent 55%); } /* ------------------------------------------------- 9) SLIDER (Recién Llegados) + Cards PRO --------------------------------------------------*/ .page-home .hzSlider{ position:relative; margin:10px auto 0; width:100%; max-width:none; padding:0 clamp(10px, var(--gutter), 18px); } .page-home .hzTrackWrap{ overflow:hidden; border-radius:22px; background:rgba(255,255,255,.78); border:1px solid rgba(15,23,42,.08); box-shadow:0 14px 34px rgba(2,6,23,.08); padding:10px; position:relative; touch-action: pan-y; } .page-home .hzTrackWrap::before, .page-home .hzTrackWrap::after{ content:""; position:absolute; top:0; bottom:0; width:36px; pointer-events:none; z-index:1; } .page-home .hzTrackWrap::before{ left:0; background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0)); } .page-home .hzTrackWrap::after{ right:0; background:linear-gradient(-90deg, rgba(255,255,255,.95), rgba(255,255,255,0)); } .page-home .hzTrack{ display:flex; gap:20px; overflow-x:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; padding:6px 2px 12px; scroll-padding-left:var(--gutter); scroll-padding-right:var(--gutter); scrollbar-width:none; touch-action: pan-y; overscroll-behavior-x: contain; } .page-home .hzTrack::-webkit-scrollbar{height:0;width:0} .page-home .hzNav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:64px; border:1px solid #e5e7eb; background:rgba(255,255,255,.92); backdrop-filter: blur(10px); border-radius:12px; box-shadow:0 10px 30px rgba(2,6,23,.08); cursor:pointer; font-size:28px; font-weight:900; display:flex; align-items:center; justify-content:center; z-index:2; } .page-home .hzNav--prev{left:clamp(6px, 1vw, 14px)} .page-home .hzNav--next{right:clamp(6px, 1vw, 14px)} .page-home .hzNav:active{transform:translateY(-50%) scale(.98)} .page-home .hzDots{display:flex;gap:8px;justify-content:center;margin-top:6px} .page-home .hzDot{ width:7px;height:7px;border-radius:999px; background:#cbd5e1;border:none;cursor:pointer; } .page-home .hzDot.is-active{background:#111;width:18px} .page-home .pCard{ scroll-snap-align:start; flex:0 0 clamp(220px, 24vw, 320px); background:#fff; border:1px solid #e5e7eb; border-radius:18px; overflow:hidden; text-decoration:none; box-shadow:0 10px 30px rgba(2,6,23,.06); transition:.18s ease; position:relative; touch-action: pan-y; } /* Fade-in on scroll (cards de productos) */ .page-home .pCard.hzReveal{ opacity:0; transform: translateY(14px); will-change: opacity, transform; } .page-home .pCard.hzReveal.hzReveal--in{ opacity:1; transform:none; transition: opacity .55s ease, transform .55s ease; } @media (prefers-reduced-motion: reduce){ .page-home .pCard.hzReveal{ opacity:1; transform:none; } .page-home .pCard.hzReveal.hzReveal--in{ transition:none; } } .page-home .pCard:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(2,6,23,.10); } .page-home .pCard__img{ height: clamp(300px, 32vw, 420px); background:#f1f5f9 center/cover no-repeat; overflow:hidden; } .page-home .pCard__img img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; } @media (max-width: 720px){ .page-home .pCard__img{ height: clamp(260px, 64vw, 360px); } } @media (max-width: 520px){ .page-home .pCard__img{ height:auto; aspect-ratio: 4 / 5; background:#f8fafc; } .page-home .pCard__img img{ object-fit:contain; padding:6px 8px; background:#f8fafc; } } .page-home .pCard__body{padding:14px 14px 16px} .page-home .pCard__kicker{ font-size:12px; letter-spacing:.12em; color:#64748b; text-transform:uppercase; margin-bottom:6px; font-weight:700; } .page-home .pCard__title{ font-size: clamp(16px, 1.6vw, 20px); font-weight:700; line-height:1.2; color:#0f172a; } .page-home .pCard__price{ margin-top:10px; font-size: clamp(15px, 1.5vw, 18px); font-weight:700; color:#111; } .page-home .pCard__btn, .page-home .pCard__cta{ margin-top:12px; display:flex; align-items:center; justify-content:center; height:44px; border-radius:999px; background:#111; color:#fff; font-weight:700; letter-spacing:.02em; } .page-home .pBadge{ position:absolute; top:12px; left:12px; background:rgba(17,17,17,.75); color:#fff; padding:7px 10px; border-radius:10px; font-size:12px; font-weight:700; backdrop-filter: blur(6px); } /* Promo badge debajo de "Nuevo" */ .page-home .pBadgePromo{ position:absolute; top:48px; left:12px; background:rgba(239,68,68,.86); color:#fff; padding:7px 10px; border-radius:10px; font-size:12px; font-weight:700; backdrop-filter: blur(6px); } /* Precios con promo en cards (home) */ .page-home .pCard__price .hzPriceNew{ font-weight:950; color:#111; } .page-home .pCard__price .hzPriceOld{ margin-left:8px; color:#64748b; text-decoration:line-through; font-weight:900; font-size:13px; } .page-home .pCard__price .hzPriceBadge{ margin-left:8px; display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-weight:950; font-size:11px; color:#b91c1c; background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.22); } @media (hover:none){ .page-home .hzNav{display:none} } /* CTAs (Comprar ahora / Seleccionar producto) - Hover claro para indicar click - Focus visible para teclado */ .page-home .pCard__cta{ display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform .14s ease, filter .14s ease, box-shadow .14s ease, background-color .14s ease, color .14s ease; } .page-home .pCard__cta:hover{ transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 14px 32px rgba(2,6,23,.18); } .page-home .pCard__cta:active{ transform: translateY(0) scale(.99); } .page-home .pCard__cta:focus-visible{ outline: 3px solid rgba(59,130,246,.45); outline-offset: 3px; } .page-home .pCard__cta--ghost{ background:#fff !important; color:#111 !important; border:1px solid #111; } .page-home .pCard__cta--ghost:hover{ background:#111 !important; color:#fff !important; } /* ========================= SLIDER estilo TORETTO ========================= */ .page-home .hzTrack{ padding-left: 0 !important; padding-right: 0 !important; } .page-home .hzTrack .pCard{ flex: 0 0 calc((100% - (18px * 4)) / 5) !important; min-width: 240px; } @media (max-width: 1400px){ .page-home .hzTrack .pCard{ flex-basis: calc((100% - (18px * 3)) / 4) !important; min-width: 240px; } } @media (max-width: 1024px){ .page-home .hzTrack .pCard{ flex-basis: calc((100% - (18px * 1)) / 2) !important; min-width: 240px; } } @media (max-width: 560px){ .page-home .hzTrackWrap{ padding:0; } .page-home .hzTrack{ gap:0; padding:0 0 10px; scroll-snap-type:x mandatory; scroll-padding-left:0; scroll-padding-right:0; } .page-home .hzTrack .pCard{ flex-basis: 100% !important; min-width: 0; scroll-snap-align:center; } } /* Drag cómodo en desktop */ .page-home .hzTrack{ cursor: grab; } .page-home .hzTrack.is-dragging{ cursor: grabbing; } /* ========================= Testimonios ========================= */ .page-home .hzTestimonials{ width:100%; max-width: none; padding: 0 var(--gutter); display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .page-home .tCard{ background:#fff; border:1px solid var(--border); border-radius: 22px; box-shadow: 0 18px 45px rgba(10,10,20,.08); padding: 16px; } .page-home .tStars{ color:#f59e0b; font-weight:950; letter-spacing:.08em; } .page-home .tText{ margin:10px 0 14px; color:#0f172a; font-weight:700; line-height:1.45; } .page-home .tWho{ display:flex; flex-direction:column; gap:2px; } .page-home .tWho b{ font-weight:950; color:#0f172a; } .page-home .tWho span{ color:#64748b; font-weight:800; font-size:12px; } @media (max-width: 980px){ .page-home .hzTestimonials{ grid-template-columns: 1fr; } } /* Evita que el drag se convierta en selección de texto */ .page-home .hzTrack, .page-home .hzTrack *{ user-select: none; } /* Evita el “arrastre de imagen” que bloquea el slider */ .page-home .pCard__img img{ -webkit-user-drag: none; pointer-events: none; /* click sigue funcionando porque cae en el */ } /* ========================= HERO SLIDER MODERNO ========================= */ .page-home .hero{ padding:22px 0 6px; background:linear-gradient(#fff, var(--soft)); } .page-home .heroSlider{ position:relative; width:100%; padding:0 18px; } .page-home .heroViewport{ overflow:hidden; border-radius:28px; box-shadow:var(--shadow); position:relative; isolation:isolate; } .page-home .heroViewport::after{ content:""; position:absolute; inset:0; background: radial-gradient(1200px 420px at 20% 30%, rgba(255,255,255,.06), transparent 60%); pointer-events:none; z-index:2; } .page-home .heroTrack{ display:flex; transition:transform .55s cubic-bezier(.2,.8,.2,1); will-change:transform; } .page-home .heroSlide{ flex:0 0 100%; min-height:420px; position:relative; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.45)), var(--bg) center / cover no-repeat; background-color:#0b0b0f; transform: translateZ(0); } .page-home .heroSlide.is-active{ animation: heroIn .6s ease; } @keyframes heroIn{ from{ transform: scale(1.02); opacity:.92; } to{ transform: scale(1); opacity:1; } } .page-home .heroSlide::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.05)); pointer-events:none; } .page-home .heroSlide::before{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.62), transparent 56%); pointer-events:none; } .page-home .heroOverlay{ color:#fff; padding:56px; max-width:760px; position:relative; z-index:3; } .page-home .heroOverlay::before{ content:""; position:absolute; inset:-20px -24px -18px -24px; border-radius:24px; background: linear-gradient(135deg, rgba(0,0,0,.58), rgba(0,0,0,.10)); opacity:.55; z-index:-1; } .page-home .heroOverlay h1{ margin:0; font-size:56px; letter-spacing:.2px; line-height:1.03; text-shadow: 0 14px 35px rgba(0,0,0,.45); } .page-home .heroOverlay p{ margin:10px 0 18px; opacity:.92; font-weight:700; text-shadow: 0 12px 26px rgba(0,0,0,.40); max-width:520px; } @media (max-width: 1100px){ .page-home .heroOverlay h1{ font-size:46px; } } @media (max-width: 720px){ .page-home .heroOverlay{ padding:36px; } .page-home .heroOverlay h1{ font-size:38px; } } @media (max-width: 520px){ .page-home .heroOverlay{ padding:26px 22px; } .page-home .heroOverlay h1{ font-size:32px; } .page-home .heroOverlay p{ font-size:14px; } } .page-home .heroCtas{ display:flex; gap:12px; flex-wrap:wrap; } .page-home .heroNav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:64px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.92); border-radius:14px; box-shadow:0 18px 45px rgba(2,6,23,.18); cursor:pointer; font-size:26px; font-weight:900; z-index:5; } .page-home .heroNav--prev{ left:24px; } .page-home .heroNav--next{ right:24px; } .page-home .heroNav:hover{ filter:brightness(.98); } .page-home .heroNav:active{ transform:translateY(-50%) scale(.98); } .page-home .heroDots{ display:flex; justify-content:center; gap:10px; margin-top:10px; } .page-home .heroDot{ width:8px; height:8px; border-radius:999px; border:none; background:#cbd5e1; cursor:pointer; } .page-home .heroDot.is-active{ background:#111; width:22px; } @media (max-width: 1100px){ .page-home .heroOverlay{ padding:42px; } .page-home .heroOverlay h1{ font-size:46px; } .page-home .heroSlide{ min-height:380px; } } @media (max-width: 520px){ .page-home .heroSlider{ padding:0 12px; } .page-home .heroOverlay{ padding:26px; } .page-home .heroOverlay h1{ font-size:34px; } .page-home .heroSlide{ min-height:340px; } .page-home .heroNav{ display:none; } } @media (prefers-reduced-motion: reduce){ .page-home .heroTrack{ transition:none; } } /* ✅ contenedor de imagen */ .catCard__img{ width: 100%; aspect-ratio: 4 / 3; /* cambia a 1/1 si quieres cuadradas */ border-radius: 18px 18px 0 0; overflow: hidden; background-size: cover; /* 🔥 encaja sin deformar */ background-position: center; background-repeat: no-repeat; } /* Si quieres que no se “corten” tanto, usa contain: background-size: contain; background-color: #eef2f7; */