btn:root{ --af-morado-oscuro:#2b0d22; --af-morado:#4b1736; --af-vino:#681f45; --af-dorado:#d7a768; --af-rosa-claro:#ead0d6; --af-textura-morada:url("../assets/img/textura-morada.png"); --alq-vino:#3b1321; --alq-vino-2:#5b1d32; --alq-rosa:#ead0cf; --alq-rosa-2:#f4e3df; --alq-dorado:#e7bd6a; --alq-crema:#fff4e6; --alq-line:rgba(231,189,106,.55); } /* Fuente recomendada: Agrega en el : */ /* Fondo general */ body{ background: linear-gradient(rgba(59,19,33,.65), rgba(59,19,33,.65)), url("../assets/bg-alquimia-textura.png") center top / 560px auto repeat !important; } /* Línea divisoria dorada */ .section, .hero, .promoDouble, .sustentablesSection{ position:relative; } .section::before, .hero::before, .promoDouble::before, .sustentablesSection::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, var(--alq-line), transparent); z-index:2; } /* ========================================================= ESTILO OSCURO TIPO HERO--SPLIT No modifica .hero--split ========================================================= */ .alquimia-dark, #productos-aleatorios, #destacadas, .section--emprendedoras{ background: linear-gradient( rgba(59,19,33,.85), rgba(59,19,33,.85) ), url("../assets/bg-alquimia-textura.png") center / 620px auto repeat !important; color:#fff4e6 !important; position:relative; overflow:hidden; padding:54px 0 !important; } .alquimia-dark::after, #productos-aleatorios::after, #destacadas::after, .section--emprendedoras::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 18% 18%, rgba(255,200,120,.14), transparent 22%), radial-gradient(circle at 80% 30%, rgba(255,150,200,.16), transparent 26%), radial-gradient(circle at 55% 85%, rgba(255,220,140,.12), transparent 20%); pointer-events:none; z-index:0; } .alquimia-dark > *, #productos-aleatorios > *, #destacadas > *, .section--emprendedoras > *{ position:relative; z-index:1; } /* Secciones claras */ .section--stories, .sustentablesSection, .promoDouble{ background: linear-gradient(rgba(244,227,223,.88), rgba(244,227,223,.88)), url("../assets/bg-alquimia-textura.png") center / 620px auto repeat !important; color:#3b1321 !important; padding:54px 0 !important; } /* ========================================================= TIPOGRAFÍA SIMILAR A LA REFERENCIA ========================================================= */ .section__head h2, .hero__title, .highlight-text, .dark-title{ } .section__head h2{ color: #fff; } #productos-aleatorios .section__head h2, #destacadas .section__head h2, .section--emprendedoras .section__head h2, .alquimia-dark .section__head h2{ color:#fff4e6 !important; text-shadow:0 6px 22px rgba(0,0,0,.38); } #productos-aleatorios .section__head p, #destacadas .section__head p, .section--emprendedoras .section__head p, .alquimia-dark .section__head p{ color:rgba(255,244,230,.86) !important; font-size:clamp(18px,2vw,26px) !important; } .section--stories .section__head h2, .sustentablesSection .section__head h2, .promoDouble .section__head h2{ color:#3b1321 !important; } /* Línea bajo títulos */ #destacadas .section__head h2::after, #productos-aleatorios .section__head h2::after, .highlight-text::after{ content:""; display:block; width:120px; height:2px; margin-top:14px; background:linear-gradient(90deg, var(--alq-dorado), transparent); } /* ========================================================= BOTONES TIPO REFERENCIA ========================================================= */ .btn,.heroBtn--secondary,.contactHero button,.btn-contacto-perfil,.socBtn--wa, .slide__btn, .promoCard__btn, .newsCard__btn, .btn-ver-todos{ border-radius:22px !important; border:2px solid rgba(231,189,106,.72) !important; background: linear-gradient( 180deg, rgba(188,147,85), rgba(55,28,24,.96) ) !important; color:#fff4e6 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 24px rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.32) !important; font-weight:800 !important; letter-spacing:.02em; } .btn,.heroBtn--secondary,.btn-contacto-perfil,.socBtn--wa:hover, .slide__btn:hover, .promoCard__btn:hover, .newsCard__btn:hover, .btn-ver-todos:hover{ transform:translateY(-2px); filter:brightness(1.08); } /* ========================================================= CARDS PRODUCTOS / TIENDAS ========================================================= */ .productTile, #featuredTrackPhp .featuredTile, .featuredTile, .storeCard, .newsCard{ border-radius:28px !important; overflow:hidden !important; border:2px solid rgba(215,167,104,.52) !important; box-shadow: inset 0 0 24px rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.36) !important; } .productTile img, .featuredTile img, .storeCard img, .newsCard img{ border-radius:inherit; } .productTile__overlay{ background: linear-gradient( to top, rgba(35,10,18,.92), rgba(35,10,18,.38), transparent ) !important; } .productTile__title, .featuredTile__title, .storeCard__title{ color:#fff !important; font-weight:900 !important; text-shadow:0 4px 14px rgba(0,0,0,.65); } .productTile__price{ color:#f4d58a !important; font-size:15px !important; font-weight:700 !important; text-shadow:none; } /* ========================================================= SLIDER ========================================================= */ .slider--full{ box-shadow:0 28px 70px rgba(59,19,33,.35) !important; } .slide__overlay{ background: linear-gradient( 180deg, rgba(25,8,14,.18), rgba(25,8,14,.45) 55%, rgba(25,8,14,.86) ) !important; } .slide__content{ padding:32px 48px 54px !important; } .slide__kicker{ background:rgba(255,244,230,.16) !important; border:1px solid rgba(231,189,106,.45) !important; color:#fff !important; box-shadow:inset 0 0 18px rgba(255,255,255,.08); } .slide__title{ font-size:clamp(28px,4vw,48px) !important; text-shadow:0 8px 24px rgba(0,0,0,.55); } .slide__desc{ font-size:clamp(16px,2vw,22px) !important; } .slider__dot{ width:34px !important; height:12px !important; border-radius:999px !important; background:rgba(255,244,230,.32) !important; border:1px solid rgba(255,244,230,.18) !important; } .slider__dot.is-active{ background:linear-gradient(90deg,#f8d98b,#d99a42) !important; border-color:rgba(231,189,106,.9) !important; } .carousel__btn, .slider__btn{ background:rgba(59,19,33,.88) !important; color:#f4d58a !important; border:1px solid rgba(231,189,106,.65) !important; } /* ========================================================= NOTICIAS ========================================================= */ #noticias{ background: linear-gradient(rgba(59,19,33,.78), rgba(59,19,33,.78)), url("../assets/bg-alquimia-textura.png") center / 620px auto repeat !important; } .newsCard{ background: linear-gradient(rgba(59,19,33,.18), rgba(59,19,33,.18)), url("../assets/bg-alquimia-textura.png") center / 520px auto repeat !important; } .newsCard__date, .newsCard__title, .newsCard__text{ color:#fff4e6 !important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:720px){ .slide__content{ padding:22px 24px 48px !important; } .slider__btn{ display:none !important; } .alquimia-dark, #productos-aleatorios, #destacadas, .section--emprendedoras, .promoDouble{ padding:38px 0 !important; } .section__head h2{ } .btn-ver-todos{ font-size:24px !important; padding:13px 26px !important; } .productTile, #featuredTrackPhp .featuredTile, .featuredTile, .storeCard, .newsCard{ border-radius:24px !important; } } /* HERO ALQUIMIA - ESTILO REFERENCIA */ .hero, .hero--split { position: relative; overflow: hidden; padding: 34px 18px 70px; background: radial-gradient(circle at 20% 20%, rgba(212, 157, 65, .18), transparent 25%), linear-gradient(180deg, #57152f 0%, #461126 100%); color: #fff; text-align: center; } /* textura/puntitos */ .hero::before, .hero--split::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px), radial-gradient(rgba(212,157,65,.22) 1px, transparent 1px); background-size: 18px 18px, 32px 32px; opacity: .35; pointer-events: none; } .hero > *, .hero--split > * { position: relative; z-index: 2; } /* texto superior */ .hero__eyebrow, .hero .eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #f5d9b5; } .hero__eyebrow::before, .hero .eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #d49d41; box-shadow: 0 0 0 3px rgba(212,157,65,.22); } /* título */ .hero__title, .hero h1 { margin: 0 0 18px; font-size: clamp(2.1rem, 8vw, 4rem); line-height: .95; font-weight: 400; font-style: italic; color: #B78A4A; text-shadow: 0 2px 10px rgba(0,0,0,.25); } /* párrafo */ .hero__text, .hero p { max-width: 640px; margin: 0 auto 24px; font-size: clamp(.95rem, 3.5vw, 1.1rem); line-height: 1.55; color: #fff5ef; } /* botón */ .hero__actions, .hero .hero__buttons { justify-content: center; } .hero .btn, .hero__btn, .hero a.btn { border: 1px solid rgba(245, 200, 170, .75); background: rgba(108, 41, 55, .7); color: #fff; border-radius: 14px; padding: 11px 22px; font-weight: 700; box-shadow: 0 8px 18px rgba(0,0,0,.18); } /* imágenes inferiores estilo collage */ .hero__media, .hero__image, .hero__images { position: relative; max-width: 520px; margin: 30px auto 0; min-height: 310px; } .hero__media img, .hero__image img, .hero__images img { border-radius: 18px; object-fit: cover; box-shadow: 0 18px 35px rgba(0,0,0,.35); } /* imagen principal */ .hero__media img:first-child, .hero__image img:first-child, .hero__images img:first-child { width: 72%; height: 270px; margin-left: auto; display: block; } /* imagen secundaria superpuesta */ .hero__media img:nth-child(2), .hero__image img:nth-child(2), .hero__images img:nth-child(2) { position: absolute; left: 0; bottom: -35px; width: 52%; height: 145px; } /* mobile */ @media (max-width: 640px) { .hero, .hero--split { padding-top: 30px; } .hero__media, .hero__image, .hero__images { min-height: 285px; } .hero__media img:first-child, .hero__image img:first-child, .hero__images img:first-child { width: 74%; height: 250px; } .hero__media img:nth-child(2), .hero__image img:nth-child(2), .hero__images img:nth-child(2) { width: 55%; height: 125px; bottom: -20px; } } /* ===================================================== HEADER PREMIUM ALQUIMIA ===================================================== */ .header{ background: linear-gradient( 180deg, #4B2E39 0%, #2D1824 100% ) !important; border-bottom: 1px solid rgba(183,138,74,.35); box-shadow: 0 10px 30px rgba(0,0,0,.25); } /* Logo circular */ .brand__logo{ width:72px; height:72px; border-radius:50% !important; background:#151015; border:3px solid #B78A4A; padding:6px; object-fit:contain; box-shadow: 0 0 0 4px rgba(183,138,74,.15), 0 10px 25px rgba(0,0,0,.35); } /* Título */ .brand .hero__title{ color:#b78a4a !important; text-shadow: 0 2px 12px rgba(0,0,0,.35); } /* Femenina dorado */ .hero__titleAccent{ background: linear-gradient( 180deg, #D8BC7A, #C69A59, #B78A4A ); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } /* Menú desktop */ .menu__link{ color:#E7D7C9 !important; font-weight:600; } .menu__link:hover{ color:#FFFFFF !important; } .menu__link.is-active{ color:#B78A4A !important; position:relative; } .menu__link.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:#B78A4A; } /* Botón Admin */ .header__actions .btn{ background:linear-gradient( 180deg, #C69A59, #B78A4A ); color:#fff; border:none; } /* Menú móvil */ .mobileMenu{ background:#2D1824 !important; border-top:1px solid rgba(183,138,74,.25); } .mobileMenu__link{ color:#E7D7C9 !important; } .mobileMenu__link:hover{ background:rgba(183,138,74,.15); } /* Burger */ .burger{ background:#4B2E39; border:1px solid rgba(183,138,74,.35); } .burger span{ background:#E7D7C9; } /* ===== FOOTER ESTILO HEADER ===== */ .footer{ background: linear-gradient( 180deg, #4B2E39 0%, #2D1824 100% ) !important; color:#f8f1e7; position:relative; overflow:hidden; } .footer::before{ content:""; position:absolute; inset:0; background:url('/assets/bg-alquimia-textura.png') center/cover; opacity:.12; pointer-events:none; } .footer__inner{ position:relative; z-index:2; } /* Logo */ .footer__logo{ color: #c09659; font-family:'Libre Baskerville', serif; font-weight:700; font-size:clamp(28px,3vw,40px); } .footer__logo .hero__titleAccent{ color:#c09659; } /* Títulos columnas */ .footer__heading{ color:#f4d58a; font-family:'Libre Baskerville', serif; font-weight:700; letter-spacing:.5px; margin-bottom:12px; position:relative; } .footer__heading::after{ content:""; display:block; width:40px; height:2px; margin-top:8px; background:#d4af37; } /* Texto */ .footer__text, .footer__copy, .footer__place{ color:rgba(255,255,255,.85); } .footer__text2{ color:rgba(255,255,255,.85); font-size: 16px; font-weight:700 !important; } /* Links */ .footer__link{ color:#f8f1e7; transition:.25s ease; } .footer__link:hover{ color:#f4d58a; padding-left:4px; } /* Línea inferior */ .footer__bottom{ margin-top:30px; padding-top:20px; border-top:1px solid rgba(212,175,55,.25); } /* Redes */ .footer__social{ display:flex; gap:12px; } .footer__socialLink{ width:42px; height:42px; border:1px solid rgba(212,175,55,.45); background:rgba(255,255,255,.05); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.3s ease; } .footer__socialLink:hover{ background:#d4af37; border-color:#d4af37; transform:translateY(-2px); } .footer__icon{ width:24px; height:24px; fill:#f8f1e7; } .footer__socialLink:hover .footer__icon{ fill:#4b1f2d; } #productos-aleatorios h2, #tiendas h2{ font-size: 30px !important; line-height: 1.2 !important; font-family: 'Libre Baskerville', serif !important; font-weight: 700 !important; } .section__head.section__head--dark h2{ font-family: 'Libre Baskerville', serif !important; font-size: 30px !important; font-weight: 700 !important; line-height: 1.2 !important; } /* Contenedor redes */ .footer__social{ display:flex; gap:12px; flex-wrap:wrap; } /* Botones redes */ .footer__social a{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:#ffffff; color:var(--alq-dorado); border:2px solid var(--alq-dorado); border-radius:50%; text-decoration:none; transition:all .25s ease; } /* Iconos */ .footer__social a i, .footer__social a svg{ color:var(--alq-dorado); fill:currentColor; font-size:18px; } /* Hover */ .footer__social a:hover{ background:var(--alq-dorado); transform:translateY(-2px); } .footer__social a:hover i, .footer__social a:hover svg{ color:#fff; fill:#fff; } .footer__social{ display:flex; justify-content:center; align-items:center; gap:16px; width:100%; } .footerContact{ display:flex; flex-direction:column; gap:10px; margin-top:12px; } .footerContact__input, .footerContact__textarea{ width:100%; padding:12px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; border-radius:8px; font-size:14px; font-family:inherit; } .footerContact__input::placeholder, .footerContact__textarea::placeholder{ color:rgba(255,255,255,.65); } .footerContact__textarea{ min-height:100px; resize:vertical; } .footerContact__btn{ background:#D4AF37; color:#3E1C2B; border:none; padding:12px; border-radius:8px; font-weight:700; cursor:pointer; transition:.3s; } .footerContact__btn:hover{ transform:translateY(-2px); opacity:.9; } /* =============================== SECCIÓN CONTACTO ALQUIMIA =============================== */ .section--contacto{ padding:70px 0 !important; background: linear-gradient(rgba(59,19,33,.86), rgba(59,19,33,.86)), url("../assets/bg-alquimia-textura.png") center / 620px auto repeat !important; color:#fff4e6; position:relative; overflow:hidden; } .section--contacto::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, var(--alq-line), transparent); } .section--contacto::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 18% 18%, rgba(255,200,120,.14), transparent 22%), radial-gradient(circle at 80% 30%, rgba(255,150,200,.14), transparent 26%); pointer-events:none; } .section--contacto .container{ position:relative; z-index:2; } .section--contacto .section__head{ text-align:center; margin-bottom:42px; } .section--contacto .section__title{ color:#f4d58a !important; font-family:'Libre Baskerville', serif !important; font-size:30px !important; font-weight:700 !important; } .section--contacto .section__lead{ max-width:760px; margin:14px auto 0; font-size:18px; line-height:1.6; color:rgba(255,244,230,.86); } .contactoGrid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; } .contactoCard{ padding:34px; border-radius:28px; border:2px solid rgba(215,167,104,.52); background:rgba(255,255,255,.06); box-shadow: inset 0 0 24px rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.36); } .contactoCard h3{ color:#f4d58a; font-family:'Libre Baskerville', serif; font-size:24px; font-weight:700; margin-bottom:24px; } .contactoCard h3::after{ content:""; display:block; width:70px; height:2px; margin-top:10px; background:linear-gradient(90deg, var(--alq-dorado), transparent); } .contactoCard p{ color:rgba(255,244,230,.9); font-size:17px; line-height:1.6; margin-bottom:18px; } .contactoCard label{ display:block; color:#fff4e6; font-weight:700; margin-bottom:18px; } .contactoCard .footerContact__input, .contactoCard .footerContact__textarea{ margin-top:8px; border-radius:14px; border:1px solid rgba(231,189,106,.42); background:rgba(255,255,255,.08); color:#fff; } .contactoCard .footerContact__btn{ border-radius:22px !important; border:2px solid rgba(231,189,106,.72) !important; background:linear-gradient(180deg, rgba(188,147,85), rgba(55,28,24,.96)) !important; color:#fff4e6 !important; font-weight:800 !important; padding:13px 24px; } .contactoSocial{ display:flex; gap:14px; margin-top:12px; } .contactoSocial a{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:2px solid var(--alq-dorado); border-radius:50%; color:var(--alq-dorado); background:#fff; text-decoration:none; font-weight:900; transition:.25s ease; } .contactoSocial a:hover{ background:var(--alq-dorado); color:#fff; transform:translateY(-2px); } @media(max-width:768px){ .contactoGrid{ grid-template-columns:1fr; } .section--contacto{ padding:45px 0 !important; } .contactoCard{ padding:24px; border-radius:24px; } } .contactHero{ position:relative; min-height:430px; display:flex; align-items:center; overflow:hidden; background: linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)), url("../assets/bg-contacto.jpeg") center / cover no-repeat; } .contactHero__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.15fr; gap:70px; align-items:center; } .contactHero__text h2{ color:rgb(183, 138, 74); font-size:clamp(34px,4vw,52px); line-height:1.1; font-weight:900; margin-bottom:26px; } .contactHero__text p{ color:#a4376f; font-size:clamp(18px,2vw,26px); line-height:1.55; letter-spacing:.03em; max-width:720px; } .contactHero__form{ display:flex; flex-direction:column; gap:28px; } .contactHero__row{ display:grid; grid-template-columns:1fr 1fr; gap:30px; } .contactHero input, .contactHero textarea{ width:100%; border:1.5px solid rgb(183, 138, 74); border-radius:10px; background:rgba(255,255,255,.75); color:#a4376f; font-size:24px; padding:24px 32px; font-family:inherit; } .contactHero textarea{ min-height:120px; resize:vertical; } .contactHero button{ width:100%; border:0; border-radius:10px; background:#000; color:#fff; padding:25px 30px; font-size:22px; font-weight:900; letter-spacing:.03em; cursor:pointer; } .contactHero button:hover{ opacity:.88; transform:translateY(-2px); } @media(max-width:768px){ .contactHero{ min-height:auto; padding:48px 0; background-position:center; } .contactHero__inner{ grid-template-columns:1fr; gap:28px; } .contactHero__text h2{ font-size:30px; margin-bottom:16px; } .contactHero__text p{ font-size:17px; } .contactHero__row{ grid-template-columns:1fr; gap:16px; } .contactHero__form{ gap:16px; } .contactHero input, .contactHero textarea{ font-size:16px; padding:15px 18px; } .contactHero button{ font-size:16px; padding:16px 20px; } }