/* ========================================= Luz Dorada — Tema Aesthetic Gold (solo CSS) Colores, tipografías y animaciones ========================================= */ :root{ --gold:#D4AF37; --gold-dark:#B68D2D; --black:#0A0A0A; --white:#FFFFFF; --ivory:#F7F5EF; --line:#EDEDED; } html{ scroll-behavior:smooth; } *{ box-sizing:border-box; } body{ background:var(--white); color:var(--black); font-family:"Montserrat","Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif !important; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Títulos elegantes */ h1,h2,h3,h4{ font-family:"Playfair Display", Georgia, "Times New Roman", serif !important; color:var(--black); letter-spacing:.25px; } h1{ font-weight:700; line-height:1.15; } h2,h3{ font-weight:600; } /* Enlaces */ a{ color:var(--black); text-decoration:none; transition:color .2s ease; } a:hover, a:focus{ color:var(--gold); outline:none; } /* Encabezado minimal */ header{ background:var(--white) !important; border-bottom:1px solid var(--line); } header .logo img{ max-height:56px !important; height:auto; } nav a{ padding:.6rem .9rem; border-radius:999px; font-weight:500; } nav a:hover{ background:var(--ivory); } /* Botones — inversión dorado/negro en hover y tap */ button, .btn, .button, input[type=submit], .dw-button, .ldl-btn{ background:var(--gold) !important; color:var(--black) !important; border:1px solid var(--gold) !important; border-radius:999px !important; padding:.85rem 1.25rem !important; font-weight:700 !important; transition: transform .08s ease, background .2s ease, color .2s ease, border-color .2s ease !important; -webkit-tap-highlight-color: transparent; } button:hover, .btn:hover, .button:hover, input[type=submit]:hover, .dw-button:hover, .ldl-btn:hover, button:active, .btn:active, .button:active, input[type=submit]:active, .dw-button:active, .ldl-btn:active{ background:var(--black) !important; color:var(--gold) !important; border-color:var(--black) !important; transform:translateY(-1px); } .ldl-btn-ghost{ background:transparent !important; color:var(--black) !important; border:1px solid var(--black) !important; } .ldl-btn-ghost:hover, .ldl-btn-ghost:active{ color:var(--gold) !important; border-color:var(--gold) !important; } /* Tarjetas y listas */ section{ padding:clamp(28px,5vw,64px) 0; } .section--soft{ background:var(--ivory); } .card, .producto, article, .dw-card{ background:var(--white); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 8px 20px rgba(10,10,10,.04); transition:transform .2s ease, box-shadow .2s ease; } .card:hover, .producto:hover, .dw-card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(10,10,10,.08); } .card img, .producto img{ width:100%; display:block; border-radius:14px; } .price{ color:var(--gold) !important; font-weight:800; } /* Badges (“Nuevo”, “Oferta”) */ .badge, .onsale, .etiqueta{ background:var(--black) !important; color:var(--gold) !important; padding:.25rem .6rem; border-radius:999px; font-size:.75rem; font-weight:800; } /* Formularios */ input, select, textarea{ border:1px solid var(--line) !important; border-radius:14px !important; padding:.8rem 1rem !important; outline:none; transition:border-color .2s ease, box-shadow .2s ease; } input:focus, select:focus, textarea:focus{ border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(212,175,55,.15); } /* Footer limpio */ footer{ background:var(--white) !important; color:var(--black) !important; border-top:1px solid var(--line); font-size:.95rem; } footer a{ color:var(--black); } footer a:hover{ color:var(--gold); } /* =========================== Barra fija de anuncio superior (sin JS) =========================== */ .ldl-annbar{ position:sticky; top:0; z-index:9999; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; padding:.6rem .9rem; text-align:center; background:linear-gradient(90deg, var(--gold), var(--gold-dark)); color:var(--black); border-bottom:1px solid rgba(0,0,0,.06); animation:ldl-fadeDown .35s ease both; } .ldl-anntext{ font-weight:600; } .ldl-annactions{ display:flex; gap:10px; flex-wrap:wrap; } .ldl-annbar .ldl-btn{ background:var(--black) !important; color:var(--gold) !important; border:1px solid var(--black) !important; } .ldl-annbar .ldl-btn:hover{ background:var(--white) !important; color:var(--black) !important; border-color:var(--white) !important; } .ldl-annbar .ldl-btn-ghost{ background:transparent !important; color:var(--black) !important; border:1px solid var(--black) !important; } .ldl-annbar .ldl-btn-ghost:hover{ color:var(--gold) !important; border-color:var(--gold) !important; } @keyframes ldl-fadeDown{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} } /* =========================== Hero “cartel” Venta Premium (sin JS) =========================== */ .ldl-hero{ position:relative; overflow:hidden; background: radial-gradient(1200px 400px at 10% 0%, rgba(212,175,55,.15), transparent), radial-gradient(1200px 400px at 90% 0%, rgba(212,175,55,.12), transparent), var(--white); border-bottom:1px solid var(--line); padding: clamp(32px, 7vw, 96px) 0; } .ldl-hero__inner{ max-width:1100px; margin:0 auto; padding:0 16px; display:grid; gap:18px; justify-items:center; text-align:center; } .ldl-hero__badge{ display:inline-block; background:var(--black); color:var(--gold); font-weight:800; padding:.28rem .7rem; border-radius:999px; font-size:.78rem; letter-spacing:.3px; } .ldl-hero__title{ font-size: clamp(2rem, 4.5vw, 3rem); margin:.2rem 0 .4rem; } .ldl-hero__subtitle{ max-width:760px; font-size:1.05rem; color:#333; } .ldl-hero__actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:10px; } /* Cards de beneficios bajo el hero */ .ldl-feats{ max-width:1100px; margin:22px auto 0; padding:0 16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; } .ldl-feat{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:16px; text-align:center; box-shadow:0 10px 24px rgba(10,10,10,.04); transition:transform .2s ease, box-shadow .2s ease; } .ldl-feat:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(10,10,10,.08); } .ldl-feat__title{ font-weight:700; margin:.2rem 0 .25rem; } .ldl-feat__text{ color:#444; font-size:.96rem; } /* Responsive finos */ @media (max-width:640px){ .ldl-anntext{ font-size:.92rem; } .ldl-hero__subtitle{ font-size:1rem; } }