/* ============================================================ ALEJAS BEAUTY — Estilos Paleta clara (estilo Dalisa · rubro cosmética) ============================================================ */ :root { /* ----- Paleta clara ----- */ --bg: #FDF2F7; /* rosado casi blanco (antes crema) */ --bg2: #FFFFFF; --bg3: #FAE8F1; /* rosa muy suave para chips/tints */ --card: #FFFFFF; --cardh: #FFF6FB; /* rosa pálido para hover */ --y: #C8A882; /* dorado cálido (acento) */ --yl: #B0895F; /* dorado oscuro (links/hover) */ --rose: #C67178; /* rosa del logo (acento de botones) */ --rose-d: #A24B56; /* rosa profundo (hover) */ --rose-l: #FFE4F3; /* rosa blush (fondos suaves) */ --txt: #1A1A1A; --txt2: #8A8076; --txt3: #B7ADA1; --bdr: rgba(26,26,26,.10); /* ----- Tokens ----- */ --shadow: 0 8px 30px rgba(26,26,26,.06); --shadow-h: 0 16px 40px rgba(162,75,86,.18); --radius: 16px; --sidebar-w: 280px; --maxw: 1440px; } /* Variante oscura opcional: añade class="dark" a para activarla */ html.dark { --bg: #07011C; --bg2: #0D032A; --bg3: #150540; --card: #0A0227; --cardh: #160648; --y: #DFC8AE; --yl: #EDD9C4; --txt: #F0EBE4; --txt2: #9A8E82; --txt3: #4A4238; --bdr: rgba(223,200,174,.12); --shadow: 0 8px 30px rgba(0,0,0,.4); --shadow-h: 0 16px 40px rgba(0,0,0,.55); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--txt); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--rose); color: #fff; } /* Scrollbar fina */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--txt3); } /* ============================================================ REVEAL (IntersectionObserver) ============================================================ */ .rv { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); } .rv.on { opacity: 1; transform: translateY(0); } .d1 { transition-delay: .06s; } .d2 { transition-delay: .12s; } .d3 { transition-delay: .18s; } .d4 { transition-delay: .24s; } .d5 { transition-delay: .30s; } .d6 { transition-delay: .36s; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } } /* ============================================================ PROMO BAR ============================================================ */ .promobar { background: var(--txt); color: var(--bg2); font-size: 12.5px; letter-spacing: .4px; text-align: center; padding: 9px 44px 9px 16px; position: relative; } .promobar strong { color: var(--rose); font-weight: 600; } .promobar .promo-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--bg2); font-size: 20px; line-height: 1; width: 28px; height: 28px; border-radius: 50%; opacity: .7; transition: opacity .2s, background .2s; } .promobar .promo-close:hover { opacity: 1; background: rgba(255,255,255,.12); } /* ============================================================ NAVBAR ============================================================ */ .navbar { position: sticky; top: 0; z-index: 80; background: color-mix(in srgb, var(--bg2) 85%, transparent); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--bdr); } .navbar-inner { max-width: var(--maxw); margin: 0 auto; height: 92px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 11px; } .nav-logo { height: 118px; width: auto; display: block; } .brand-mark { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--rose), var(--rose-d)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Cormorant Garamond', serif; font-weight: 800; font-size: 17px; box-shadow: 0 4px 14px rgba(162,75,86,.35); } .brand-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 23px; letter-spacing: 0; } .brand-name span { color: var(--rose); } .nav-links { display: flex; align-items: center; gap: 6px; } .nav-links a { font-size: 13.5px; font-weight: 500; color: var(--txt2); padding: 8px 14px; border-radius: 999px; transition: color .2s, background .2s; } .nav-links a:hover { color: var(--txt); background: var(--bg3); } .nav-links a.cta { background: var(--txt); color: var(--bg2); } .nav-links a.cta:hover { background: var(--rose-d); color: #fff; } .nav-toggle { display: none; background: none; border: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; flex-shrink: 0; } .nav-toggle span { width: 22px; height: 2px; background: var(--txt); border-radius: 2px; transition: transform .3s, opacity .2s; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; max-width: var(--maxw); margin: 18px auto 0; padding: 0 28px; } .hero-inner { position: relative; height: 440px; border-radius: 24px; overflow: hidden; display: flex; align-items: center; } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,12,6,.72) 0%, rgba(20,12,6,.35) 55%, transparent 100%), linear-gradient(0deg, rgba(20,12,6,.4), transparent 60%); } .hero-content { position: relative; padding: 0 clamp(28px, 6vw, 72px); max-width: 640px; } .hero-badge { display: inline-block; background: rgba(255,255,255,.92); color: var(--txt); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; } .hero-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: clamp(42px, 6.4vw, 70px); line-height: 1.05; letter-spacing: -0.5px; color: #fff; margin-bottom: 16px; } .hero-title em { font-style: normal; color: var(--rose); } .hero-sub { font-size: clamp(14px, 1.6vw, 17px); color: rgba(255,255,255,.85); line-height: 1.55; margin-bottom: 28px; max-width: 440px; } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; transition: transform .2s, background .2s, color .2s, border-color .2s; } .btn:hover { transform: translateY(-2px); } .btn svg { width: 18px; height: 18px; flex-shrink: 0; } .btn-primary { background: var(--rose); color: #fff; } .btn-primary:hover { background: var(--rose-d); } .btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); } .btn-ghost:hover { background: rgba(255,255,255,.22); } /* ============================================================ LAYOUT: SIDEBAR + MAIN ============================================================ */ .layout { max-width: var(--maxw); margin: 0 auto; padding: 38px 28px 60px; display: grid; grid-template-columns: var(--sidebar-w) 1fr; gap: 34px; align-items: start; } /* ----- SIDEBAR ----- */ .sidebar { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; } .side-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .side-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 15px; letter-spacing: .2px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .side-title::before { content: ""; width: 18px; height: 2px; background: var(--rose); border-radius: 2px; } .side-row { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; border-bottom: 1px dashed var(--bdr); font-size: 13.5px; color: var(--txt2); transition: color .2s; } .side-row:last-child { border-bottom: none; } a.side-row:hover { color: var(--rose-d); } .side-row .ico { font-size: 16px; line-height: 1.3; flex-shrink: 0; } .side-row .rt { line-height: 1.4; } .side-row .rt b { display: block; color: var(--txt); font-weight: 600; font-size: 13px; } .delivery-opt { display: flex; gap: 11px; align-items: flex-start; padding: 11px; border-radius: 12px; background: var(--bg3); margin-bottom: 9px; } .delivery-opt:last-child { margin-bottom: 0; } .delivery-opt .ico { font-size: 18px; } .delivery-opt b { display: block; font-size: 13px; margin-bottom: 2px; } .delivery-opt p { font-size: 12px; color: var(--txt2); line-height: 1.4; } .cat-links { display: flex; flex-direction: column; gap: 2px; } .cat-link { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--txt2); transition: background .2s, color .2s; border: none; background: none; width: 100%; text-align: left; } .cat-link:hover { background: var(--bg3); color: var(--txt); } .cat-link.active { background: var(--txt); color: var(--bg2); } .cat-link.active .cat-count { background: rgba(255,255,255,.22); color: #fff; } .cat-count { font-size: 11px; font-weight: 600; background: var(--bg3); color: var(--txt2); padding: 2px 8px; border-radius: 999px; } /* ----- MAIN ----- */ .main { min-width: 0; min-height: 78vh; } /* El catálogo siempre tiene altura suficiente para poder scrollearse al tope (evita que al filtrar una categoría corta el scroll "salte" al footer). */ #catalogo { scroll-margin-top: 96px; } /* Toolbar: búsqueda + vista */ .toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; } .searchbar { flex: 1; position: relative; display: flex; align-items: center; } .searchbar .lupa { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--txt2); pointer-events: none; } .searchbar input { width: 100%; font-family: inherit; font-size: 14.5px; color: var(--txt); background: var(--card); border: 1px solid var(--bdr); border-radius: 999px; padding: 13px 44px 13px 44px; outline: none; transition: border-color .2s, box-shadow .2s; } .searchbar input::placeholder { color: var(--txt3); } .searchbar input:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(198,113,120,.16); } .searchbar .clear { position: absolute; right: 12px; width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--bg3); color: var(--txt2); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; } .searchbar .clear:hover { background: var(--txt3); color: #fff; } .view-toggle { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--bdr); border-radius: 999px; padding: 4px; } .view-toggle button { width: 38px; height: 38px; border: none; background: none; border-radius: 999px; color: var(--txt2); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; } .view-toggle button svg { width: 18px; height: 18px; } .view-toggle button.active { background: var(--txt); color: var(--bg2); } /* Toggle Minorista / Mayorista */ .price-toggle { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--bdr); border-radius: 999px; padding: 4px; } .price-toggle button { border: none; background: none; border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--txt2); white-space: nowrap; transition: background .2s, color .2s; } .price-toggle button.active { background: var(--rose); color: #fff; } /* Etiqueta "mayorista" junto al precio */ .price-tag { display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--rose-d); background: rgba(198,113,120,.16); padding: 2px 7px; border-radius: 999px; margin-left: 7px; vertical-align: middle; } /* Aviso de modo mayorista */ .mayorista-note { display: flex; align-items: center; gap: 9px; background: var(--bg3); border: 1px solid var(--bdr); border-radius: 12px; padding: 11px 16px; margin-bottom: 20px; font-size: 13px; color: var(--txt2); } .mayorista-note b { color: var(--txt); } /* Pills filtro */ .pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 26px; scrollbar-width: none; } .pills::-webkit-scrollbar { display: none; } .pill { flex-shrink: 0; font-size: 13px; font-weight: 500; color: var(--txt2); background: var(--card); border: 1px solid var(--bdr); border-radius: 999px; padding: 9px 16px; white-space: nowrap; transition: all .2s; } .pill:hover { border-color: var(--rose); color: var(--txt); } .pill.active { background: var(--rose); border-color: var(--rose); color: #fff; } /* Sección de categoría */ .cat-section { margin-bottom: 46px; } .cat-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--bdr); } .cat-head h2 { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 30px; letter-spacing: 0; } .cat-head .vertodo { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--rose-d); border: none; background: none; display: inline-flex; align-items: center; gap: 5px; transition: gap .2s; } .cat-head .vertodo:hover { gap: 9px; } /* Grilla / lista */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .grid.list { grid-template-columns: 1fr; gap: 14px; } /* ============================================================ PRODUCT CARD ============================================================ */ .card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--radius); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform .25s, border-color .25s, box-shadow .25s; } .card:hover { transform: translateY(-4px); border-color: var(--rose); box-shadow: 0 16px 40px rgba(198,113,120,.20); } .card-imgwrap { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg3); } .card-imgwrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .card:hover .card-imgwrap img { transform: scale(1.05); } .card-badge { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.92); color: var(--txt); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .card-body { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; } .card-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 18px; line-height: 1.2; margin-bottom: 6px; } .card-desc { font-size: 12.5px; color: var(--txt2); line-height: 1.45; margin-bottom: 14px; flex: 1; } .card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; } .card-price { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 18px; } .card-more { font-size: 12px; font-weight: 600; color: var(--rose); display: inline-flex; align-items: center; gap: 4px; transition: gap .2s; } .card:hover .card-more { gap: 7px; } /* Vista lista */ .grid.list .card { flex-direction: row; } .grid.list .card-imgwrap { width: 180px; aspect-ratio: 1; flex-shrink: 0; } .grid.list .card-body { padding: 18px 22px; } .grid.list .card-name { font-size: 18px; } .grid.list .card-desc { font-size: 13.5px; } /* Sin resultados */ .empty { text-align: center; padding: 80px 20px; color: var(--txt2); } .empty .big { font-size: 46px; margin-bottom: 14px; } .empty h3 { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--txt); margin-bottom: 6px; } /* ============================================================ MODAL ============================================================ */ .modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(20,12,6,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeIn .25s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--bg2); border-radius: 22px; width: 100%; max-width: 880px; max-height: 90vh; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: pop .3s cubic-bezier(.2,.8,.2,1); } @keyframes pop { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } } .modal-img { position: relative; background: var(--bg3); } .modal-img img { width: 100%; height: 100%; object-fit: cover; } .modal-img .m-badge { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,.92); color: var(--txt); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } .modal-body { padding: 32px; overflow-y: auto; display: flex; flex-direction: column; } .modal-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: var(--txt); font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.15); transition: transform .2s; } .modal-close:hover { transform: rotate(90deg); } .modal-cat { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rose); margin-bottom: 10px; } .modal-title { font-family: 'Cormorant Garamond', serif; font-weight: 800; font-size: 32px; line-height: 1.12; letter-spacing: 0; margin-bottom: 12px; } .modal-desc { font-size: 15px; color: var(--txt2); line-height: 1.6; margin-bottom: 22px; } .modal-details { background: var(--bg3); border-radius: 14px; padding: 16px 18px; margin-bottom: 22px; } .modal-details .lbl { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--txt2); margin-bottom: 7px; } .modal-details p { font-size: 13.5px; line-height: 1.6; color: var(--txt); } .modal-price { font-family: 'Cormorant Garamond', serif; font-weight: 800; font-size: 34px; margin-bottom: 22px; margin-top: auto; } .modal-wa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px; background: var(--rose); color: #fff; font-size: 15px; font-weight: 600; border: none; border-radius: 14px; transition: background .2s, transform .2s; } .modal-wa:hover { background: var(--rose-d); transform: translateY(-2px); } .modal-wa svg { width: 20px; height: 20px; fill: currentColor; } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--txt); color: var(--bg2); margin-top: 30px; } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 56px 28px 30px; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; } .footer h4 { font-family: 'Cormorant Garamond', serif; font-weight: 800; font-size: 22px; margin-bottom: 12px; } .footer h4 span { color: var(--rose); } .footer-logo-img { height: 120px; width: auto; display: block; margin: 0 0 18px; filter: drop-shadow(0 6px 22px rgba(198,113,120,.4)); } .footer .ftag { font-size: 13.5px; color: rgba(255,255,255,.55); line-height: 1.6; max-width: 320px; margin-bottom: 20px; } .footer .fcol-title { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rose); margin-bottom: 16px; } .footer .fcol a, .footer .fcol p { display: block; font-size: 13.5px; color: rgba(255,255,255,.7); padding: 6px 0; transition: color .2s; } .footer .fcol a:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 10px; } .footer-bottom-inner { max-width: var(--maxw); margin: 0 auto; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12px; color: rgba(255,255,255,.4); } .footer-social { display: flex; gap: 10px; } .footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; } .footer-social a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); } .footer-social svg { width: 17px; height: 17px; fill: rgba(255,255,255,.8); } /* ============================================================ WHATSAPP FLOAT ============================================================ */ .wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: var(--rose); border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(198,113,120,.45); transition: transform .2s; animation: waPulse 2.4s infinite; } .wa-float:hover { transform: scale(1.08); } .wa-float svg { width: 30px; height: 30px; fill: #fff; } @keyframes waPulse { 0% { box-shadow: 0 8px 24px rgba(198,113,120,.45), 0 0 0 0 rgba(198,113,120,.4); } 70% { box-shadow: 0 8px 24px rgba(198,113,120,.45), 0 0 0 16px rgba(198,113,120,0); } 100% { box-shadow: 0 8px 24px rgba(198,113,120,.45), 0 0 0 0 rgba(198,113,120,0); } } /* ============================================================ PANTALLA DE ENTRADA (SPLASH) ============================================================ */ .splash { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 32px 22px; background: radial-gradient(120% 80% at 50% 0%, var(--bg2) 0%, var(--bg) 58%, var(--bg3) 100%); } .splash-inner { width: 100%; max-width: 440px; text-align: center; display: flex; flex-direction: column; align-items: center; } .splash-logo-frame { width: 100%; max-width: 300px; background: #fff; padding: 12px; border-radius: 30px; border: 1px solid rgba(198,113,120,.35); box-shadow: 0 22px 55px rgba(162,75,86,.22), 0 6px 18px rgba(26,26,26,.06); margin-bottom: 22px; } .splash-logo { display: block; width: 100%; height: auto; border-radius: 20px; } .splash-sub { font-size: 14px; color: var(--txt2); letter-spacing: .3px; margin-bottom: 34px; } .splash-btns { width: 100%; display: flex; flex-direction: column; gap: 14px; } .splash-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 21px; padding: 17px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s, color .2s; } .splash-btn:hover { transform: translateY(-2px); } .splash-btn.primary { background: var(--rose); color: #fff; box-shadow: 0 10px 26px rgba(198,113,120,.34); } .splash-btn.primary:hover { background: var(--rose-d); color: #fff; box-shadow: 0 16px 36px rgba(162,75,86,.42); } .splash-btn.wa { background: var(--rose); color: #fff; box-shadow: 0 10px 26px rgba(198,113,120,.32); } .splash-btn.wa:hover { background: var(--rose-d); } .splash-btn.wa svg { width: 22px; height: 22px; fill: currentColor; } /* ===== Inicio "link-in-bio" (concepto Beacons, a nuestra onda) ===== */ .bio { min-height: 100vh; min-height: 100dvh; padding: 22px 18px 72px; background: linear-gradient(180deg, #FFEAF2 0%, var(--bg) 36%); } .bio-inner { width: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .bio-cover { width: 100%; height: 200px; border-radius: 22px; overflow: hidden; border: 1px solid var(--bdr); box-shadow: var(--shadow); } .bio-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .bio .splash-logo-frame { max-width: 230px; margin-bottom: 18px; } .bio .splash-logo-frame.bio-avatar { max-width: 190px; margin-top: 10px; margin-bottom: 14px; padding: 6px; position: relative; z-index: 2; } .bio-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 33px; line-height: 1.1; text-align: center; } .bio-sub { font-size: 14px; color: var(--txt2); text-align: center; margin-top: 5px; max-width: 360px; line-height: 1.5; } .bio-socials { display: flex; gap: 12px; margin: 18px 0 26px; } .bio-social { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--bdr); color: var(--rose); box-shadow: var(--shadow); transition: transform .2s, border-color .2s; } .bio-social:hover { transform: translateY(-2px); border-color: var(--rose); } .bio-social svg { width: 20px; height: 20px; fill: currentColor; } .bio-links { width: 100%; display: flex; flex-direction: column; gap: 12px; } .bio-sep { display: flex; align-items: center; gap: 14px; margin: 16px 2px 6px; font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--txt2); } .bio-sep::before, .bio-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--bdr), transparent); } @media (max-width: 600px) { .bio { padding: 16px 16px 64px; } .bio-name { font-size: 29px; } .bio-cover { height: 165px; } .bio .splash-logo-frame.bio-avatar { max-width: 158px; margin-top: 10px; } } /* ===== Header chico (categorías / productos) ===== */ .mini-header { position: sticky; top: 0; z-index: 80; background: color-mix(in srgb, var(--bg2) 85%, transparent); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--bdr); } .mini-inner { max-width: 760px; margin: 0 auto; height: 86px; padding: 0 22px; display: flex; align-items: center; justify-content: center; } .mini-logo { height: 70px; width: auto; cursor: pointer; background: #fff; padding: 5px; border-radius: 14px; border: 1px solid var(--bdr); box-shadow: 0 6px 16px rgba(162,75,86,.18); } /* ===== Lista de categorías (botones) ===== */ .cats-screen { max-width: 620px; margin: 0 auto; padding: 30px 22px 90px; } .cats-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 34px; text-align: center; margin-bottom: 6px; } .cats-help { text-align: center; font-size: 14px; color: var(--txt2); margin-bottom: 26px; } .cats-list { display: flex; flex-direction: column; gap: 12px; } .cat-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--card); border: 1px solid var(--bdr); border-radius: 16px; padding: 19px 24px; cursor: pointer; box-shadow: var(--shadow); transition: transform .2s, border-color .2s, box-shadow .2s, background .2s; } .cat-btn:hover { transform: translateY(-2px); border-color: var(--rose); background: #FFF6FA; box-shadow: 0 16px 40px rgba(198,113,120,.20); } .cat-btn-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 21px; letter-spacing: .2px; text-align: left; } .cat-btn-meta { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--txt2); } .cat-btn-meta .chev { font-size: 18px; color: var(--rose); transition: transform .2s; } .cat-btn:hover .cat-btn-meta .chev { transform: translateX(4px); } /* ===== Pantalla de productos ===== */ .prod-screen { max-width: 1180px; margin: 0 auto; padding: 24px 22px 90px; } .prod-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .prod-back { border: 1px solid var(--bdr); background: var(--card); color: var(--txt); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; } .prod-back:hover { border-color: var(--rose); background: var(--rose-l); } .prod-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 30px; } .prod-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; } @media (max-width: 600px) { .splash-logo-frame { max-width: 250px; padding: 10px; border-radius: 26px; } .splash-btn { font-size: 19px; padding: 16px 22px; } .mini-inner { height: 72px; } .mini-logo { height: 56px; } .cats-title { font-size: 28px; } .cat-btn { padding: 16px 18px; } .cat-btn-name { font-size: 18px; } .prod-title { font-size: 24px; } .prod-tools .searchbar { flex: 1 1 100%; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1280px) { .navbar-inner { padding: 0 22px; } .hero, .layout { padding-left: 22px; padding-right: 22px; } .footer-inner, .footer-bottom-inner { padding-left: 22px; padding-right: 22px; } } @media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; gap: 26px; } .sidebar { position: static; flex-direction: row; flex-wrap: wrap; } .sidebar .side-card { flex: 1 1 260px; min-width: 240px; } .grid { grid-template-columns: repeat(3, 1fr); } .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { /* Navbar: menú desplegable */ .nav-toggle { display: flex; } .nav-links { display: flex; position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; align-items: stretch; gap: 4px; background: var(--bg2); border-bottom: 1px solid var(--bdr); box-shadow: var(--shadow); padding: 10px 16px 16px; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height .3s ease, opacity .2s ease, padding .3s ease; } .nav-links.open { max-height: 320px; opacity: 1; visibility: visible; padding: 10px 16px 16px; } .navbar { position: sticky; } .navbar-inner { position: relative; } .nav-links a { padding: 13px 14px; font-size: 15px; border-radius: 12px; text-align: center; } .nav-links a.cta { margin-top: 4px; } .grid { grid-template-columns: repeat(2, 1fr); } .modal-overlay { padding: 0; align-items: flex-end; } .modal { display: flex; flex-direction: column; max-height: 94vh; border-radius: 22px 22px 0 0; } .modal-img { height: 220px; flex: 0 0 auto; } .modal-body { padding: 24px 22px 26px; flex: 1 1 auto; min-height: 0; } .modal-price { margin-top: 18px; } .grid.list .card { flex-direction: column; } .grid.list .card-imgwrap { width: 100%; } .footer-inner { grid-template-columns: 1fr; gap: 28px; } .hero-inner { height: auto; min-height: 400px; } .hero-content { max-width: 100%; padding-top: 32px; padding-bottom: 32px; } .cat-head h2 { font-size: 26px; } /* Toolbar: búsqueda ocupa el ancho, toggles bajan ordenados */ .toolbar { gap: 10px; } .searchbar { flex: 1 1 100%; } .price-toggle { flex: 1 1 auto; } .price-toggle button { flex: 1; padding: 11px 14px; } .view-toggle { flex: 0 0 auto; } .pills { gap: 8px; margin-bottom: 22px; } .pill { padding: 10px 16px; } } @media (max-width: 600px) { .layout { padding: 24px 16px 50px; } .hero { padding: 0 16px; margin-top: 12px; } .navbar-inner { padding: 0 16px; height: 78px; } .nav-logo { height: 102px; } .footer-inner { padding: 44px 16px 26px; } .footer-bottom-inner { padding: 20px 16px; } .footer-logo-img { height: 96px; } .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .card-body { padding: 13px 13px 15px; } .card-name { font-size: 16px; } .card-desc { display: none; } .card-price { font-size: 16px; } .price-tag { display: inline-block; margin-left: 0; margin-top: 3px; } .card-foot { gap: 8px; } .card-more { font-size: 11px; } .hero-inner { min-height: 360px; } .hero-content { padding: 28px 22px; } .cat-head h2 { font-size: 24px; } .cat-section { margin-bottom: 38px; } .wa-float { width: 52px; height: 52px; bottom: 18px; right: 16px; } .wa-float svg { width: 27px; height: 27px; } } @media (max-width: 400px) { .grid { gap: 10px; } .nav-logo { height: 92px; } .hero-inner { min-height: 340px; } .hero-ctas { gap: 10px; } .hero-ctas .btn { flex: 1 1 100%; justify-content: center; } .card-foot { flex-direction: column; align-items: flex-start; } .card-more { align-self: flex-end; } .promobar { font-size: 11.5px; padding: 9px 40px 9px 12px; } }