/* ============================================================================= AUREX JEWELRY — styles.css Archetype: 02 Editorial Dark Warm (lujo oscuro) — espresso/onyx + dorado antiguo. Personaliza colores en la sección 1 (Tokens). Tipografías en el del HTML. ============================================================================= */ /* ============================================================= 1. Tokens ============================================================= */ :root { /* Fondo — nunca negro puro, cálido tipo espresso/onyx */ --bg: #0d0b09; --bg-2: #14100c; --bg-3: #1d1712; /* cards */ --bg-navy: #10141c; /* toque azul marino sutil — profesionalismo */ /* Texto — nunca blanco puro */ --cream: #f3ecdd; --cream-2: #ddd0b8; --cream-3: #8c8072; /* metadatos */ /* Acento — dorado antiguo (seguridad + lujo) */ --gold: #e8a930; --gold-2: #f5c452; --gold-dim: #a67c22; /* Estado / feedback */ --ok: #7fae7a; --err: #d98a7a; --line: rgba(243, 236, 221, 0.12); --line-gold: rgba(232, 169, 48, 0.35); --radius: 14px; --gutter: clamp(1.25rem, 4vw, 3rem); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --font-display: "Fraunces", "Georgia", serif; --font-sans: "Inter", -apple-system, "Segoe UI", sans-serif; } /* ============================================================= 2. Reset & base ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { -webkit-text-size-adjust: 100%; tab-size: 2; overflow-x: hidden; } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; background: var(--bg); color: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overscroll-behavior-y: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } a { color: inherit; text-decoration: none; } p { text-wrap: pretty; } h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.01em; font-family: var(--font-display); font-weight: 500; } ul { list-style: none; padding: 0; } ::selection { background: var(--gold); color: var(--bg); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } /* ============================================================= 3. Utilities ============================================================= */ .container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); } .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; } .skip-link { position: fixed; top: -100px; left: 1rem; padding: .7rem 1.2rem; background: var(--gold); color: var(--bg); z-index: 9999; border-radius: 8px; font-weight: 600; transition: top .2s var(--ease-out); } .skip-link:focus { top: 1rem; } .eyebrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-sans); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; } .section { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; } .section-head { max-width: 680px; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .section-head h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); margin-top: .6rem; } .section-head p { color: var(--cream-2); margin-top: .9rem; font-size: 1.05rem; } .section-head.center { margin-inline: auto; text-align: center; } /* ============================================================= 4. Typography ============================================================= */ .lede { font-size: 1.15rem; color: var(--cream-2); max-width: 60ch; } /* ============================================================= 5. Components ============================================================= */ /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 1rem 1.7rem; border-radius: 999px; font-weight: 600; font-size: .98rem; min-height: 48px; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out); white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #1a1206; box-shadow: 0 10px 30px -10px rgba(232, 169, 48,.55); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(232, 169, 48,.7); } .btn-ghost { background: transparent; color: var(--cream); border: 1px solid var(--line-gold); } .btn-ghost:hover { border-color: var(--gold); background: rgba(232, 169, 48,.08); } .btn-block { width: 100%; } .btn-lg { padding: 1.1rem 2rem; font-size: 1.05rem; } /* --- Nav --- */ .nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding-block: .9rem; backdrop-filter: blur(10px); background: rgba(13,11,9,.72); border-bottom: 1px solid var(--line); } @supports not (backdrop-filter: blur(10px)) { .nav { background: rgba(13,11,9,.94); } } .nav-inner { display: flex; align-items: center; justify-content: flex-start; gap: .8rem; width: 100%; } .brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--cream); margin-right: auto; } .brand img { height: 40px; width: 40px; border-radius: 50%; } .nav-links { display: none; gap: 2rem; font-size: .92rem; color: var(--cream-2); } .nav-links a { transition: color .25s var(--ease-out); } .nav-links a:hover { color: var(--gold-2); } @media (min-width: 960px) { .nav-links { display: flex; } } .nav-cta { display: none; } @media (min-width: 720px) { .nav-cta { display: inline-flex; } } /* --- Selector de idioma ES/EN --- */ .lang-toggle { display: flex; align-items: center; gap: .1rem; flex-shrink: 0; border: 1px solid var(--line-gold, rgba(232,169,48,.35)); border-radius: 999px; padding: .2rem; } .lang-btn { border: none; background: transparent; color: var(--cream-2); font-family: var(--font-sans); font-size: .74rem; font-weight: 700; letter-spacing: .04em; line-height: 1; padding: .4rem .6rem; border-radius: 999px; cursor: pointer; transition: background .25s var(--ease-out), color .25s var(--ease-out); } .lang-btn:hover { color: var(--gold-2); } .lang-btn.is-active { background: var(--gold); color: var(--bg); } .lang-btn.is-active:hover { color: var(--bg); } @media (max-width: 380px) { .lang-btn { padding: .35rem .5rem; font-size: .7rem; } } /* --- WhatsApp floating button --- */ .wa-float { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 50; display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem 0.9rem .9rem; border-radius: 999px; background: #1f7a4d; color: #fff; box-shadow: 0 14px 34px -10px rgba(0,0,0,.55); transition: transform .3s var(--ease-out); max-width: min(320px, calc(100vw - 2.2rem)); } .wa-float:hover { transform: translateY(-3px) scale(1.02); } .wa-float svg { width: 26px; height: 26px; flex-shrink: 0; } .wa-float-text { display: none; font-size: .86rem; font-weight: 600; line-height: 1.2; } @media (min-width: 620px) { .wa-float-text { display: block; } } .wa-float-pulse { position: absolute; inset: -4px; border-radius: 999px; border: 2px solid #1f7a4d; animation: waPulse 2.4s ease-out infinite; } @keyframes waPulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } } /* --- Cards --- */ .card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; } /* --- Pain cards --- */ .pain-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .pain-grid { grid-template-columns: 1fr 1fr; } } .pain-card { position: relative; overflow: hidden; transition: transform .4s var(--ease-out), border-color .4s var(--ease-out); } .pain-card:hover { transform: translateY(-4px); border-color: var(--line-gold); } .pain-card .pain-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(232, 169, 48,.12); border: 1px solid var(--line-gold); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--gold-2); } .pain-card h3 { font-size: 1.15rem; color: var(--cream); margin-bottom: .5rem; } .pain-card .pain-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cream-3); margin-bottom: .3rem; display: block; } .pain-card .relief-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-2); margin-top: .9rem; margin-bottom: .3rem; display: block; } .pain-card p.relief { color: var(--cream-2); font-size: .96rem; } /* --- Steps (proceso) --- */ .steps-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; counter-reset: step; } @media (min-width: 720px) { .steps-grid { grid-template-columns: repeat(4, 1fr); } } .step { position: relative; padding-top: 2.4rem; border-top: 1px solid var(--line-gold); } .step .step-n { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); display: block; margin-bottom: .5rem; } .step h3 { font-size: 1.05rem; margin-bottom: .4rem; color: var(--cream); } .step p { color: var(--cream-2); font-size: .92rem; } /* --- Trust / confianza --- */ .trust-wrap { display: grid; gap: 2.5rem; grid-template-columns: 1fr; } @media (min-width: 960px) { .trust-wrap { grid-template-columns: 1.05fr .95fr; align-items: start; } } .trust-address { background: var(--bg-navy); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; display: flex; gap: 1rem; align-items: flex-start; } .trust-address svg { flex-shrink: 0; color: var(--gold-2); width: 26px; height: 26px; margin-top: 2px; } .trust-address h3 { font-size: 1.05rem; color: var(--cream); margin-bottom: .3rem; } .trust-address p { color: var(--cream-2); font-size: .95rem; } .trust-address a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; } .badge-row { display: grid; gap: .9rem; margin-top: 1.4rem; grid-template-columns: 1fr; } @media (min-width: 540px) { .badge-row { grid-template-columns: repeat(3, 1fr); } } .badge { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1rem; border: 1px solid var(--line-gold); border-radius: 12px; background: rgba(232, 169, 48,.05); } .badge-label { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem; color: var(--gold-2); } .badge-label svg { width: 18px; height: 18px; flex-shrink: 0; } .badge-sub { font-size: .82rem; color: var(--cream-3); } /* --- Testimonials --- */ .testi-list { display: grid; gap: 1rem; } .testi-card { } .testi-stars { color: var(--gold); letter-spacing: 2px; font-size: .95rem; margin-bottom: .6rem; } .testi-quote { color: var(--cream-2); font-size: .98rem; font-style: italic; } .testi-name { margin-top: 1rem; font-size: .88rem; color: var(--cream); font-weight: 600; } .testi-loc { font-size: .8rem; color: var(--cream-3); } /* --- Deseo / resultado --- */ .desire-wrap { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 960px) { .desire-wrap { grid-template-columns: 1fr 1fr; } } .desire-figure { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 5; background: var(--bg-3); } .desire-figure img { width: 100%; height: 100%; object-fit: cover; } .desire-list { display: grid; gap: 1rem; margin-top: 1.4rem; } .desire-item { display: flex; gap: .8rem; align-items: flex-start; } .desire-item svg { color: var(--gold); width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; } .desire-item p { color: var(--cream-2); } .desire-item strong { color: var(--cream); } /* --- CTA final (Acción) --- */ .cta-final { border-radius: 24px; padding: clamp(2rem, 5vw, 3.5rem); background: linear-gradient(160deg, var(--bg-3), var(--bg-navy)); border: 1px solid var(--line-gold); text-align: center; position: relative; overflow: hidden; } .cta-final h2 { font-size: clamp(1.8rem, 4.4vw, 2.7rem); } .cta-final p { color: var(--cream-2); margin-top: .9rem; max-width: 56ch; margin-inline: auto; } .cta-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 1.8rem; } /* --- FAQ (elemento nativo
, funciona sin JS) --- */ .faq-list { display: grid; gap: .7rem; max-width: 760px; margin-inline: auto; } .faq-item { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-3); overflow: hidden; } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; text-align: left; font-weight: 600; color: var(--cream); cursor: pointer; list-style: none; } .faq-q::-webkit-details-marker { display: none; } .faq-q .chev { transition: transform .35s var(--ease-out); flex-shrink: 0; color: var(--gold-2); } .faq-item[open] .chev { transform: rotate(180deg); } .faq-a { padding: 0 1.3rem 1.1rem; color: var(--cream-2); font-size: .95rem; } /* --- Footer --- */ .footer { border-top: 1px solid var(--line); padding-block: 2.5rem; } .footer-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } } .footer h4 { font-family: var(--font-sans); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-2); margin-bottom: .8rem; } .footer p, .footer a { color: var(--cream-3); font-size: .9rem; } .footer a:hover { color: var(--gold-2); } .footer-bottom { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; font-size: .8rem; color: var(--cream-3); } /* --- Calculadora modal --- */ .calc-trigger { cursor: pointer; } .calc-dialog { border: 0; padding: 0; background: transparent; max-width: min(720px, 94vw); width: 100%; max-height: 92vh; } .calc-dialog::backdrop { background: rgba(8,6,4,.78); backdrop-filter: blur(3px); } .calc-frame-wrap { background: var(--bg-2); border: 1px solid var(--line-gold); border-radius: 18px; overflow: hidden; height: min(86vh, 780px); display: flex; flex-direction: column; } .calc-frame-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); } .calc-frame-head h3 { font-size: 1rem; font-family: var(--font-sans); font-weight: 700; color: var(--cream); } .calc-close { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-3); } .calc-close:hover { background: rgba(232, 169, 48,.15); } .calc-frame-wrap iframe { flex: 1; width: 100%; border: 0; } /* ============================================================= 6. Sections — Hero ============================================================= */ .hero { position: relative; padding-top: clamp(3rem, 8vw, 5.5rem); padding-bottom: clamp(3.5rem, 8vw, 6rem); overflow: hidden; } .hero-halo { position: absolute; inset: -40% -10% -30% -10%; z-index: 0; pointer-events: none; background: radial-gradient(45% 40% at 50% 20%, rgba(232, 169, 48,.22), transparent 70%); filter: blur(60px); } .hero-inner { position: relative; z-index: 1; max-width: 780px; margin-inline: auto; text-align: center; } .hero-title { font-size: clamp(2.3rem, 6vw, 4rem); margin-top: 1rem; max-width: 18ch; margin-inline: auto; } .hero-title em { color: var(--gold-2); font-style: italic; } .hero-sub { margin-top: 1.2rem; font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--cream-2); max-width: 52ch; margin-inline: auto; } .hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; } .hero-trustline { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: center; font-size: .84rem; color: var(--cream-3); } .hero-trustline span { display: inline-flex; align-items: center; gap: .4em; } .hero-trustline svg { width: 15px; height: 15px; color: var(--gold-2); } .hero-figure { margin-top: 3rem; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/8; background: var(--bg-3); } .hero-figure img { width: 100%; height: 100%; object-fit: cover; } /* Placeholder visual (para imágenes que el usuario reemplazará) */ .img-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; background: repeating-linear-gradient(135deg, rgba(232, 169, 48,.06) 0 14px, transparent 14px 28px); color: var(--cream-3); font-size: .82rem; text-align: center; padding: 1rem; line-height: 1.5; } /* ============================================================= 7. Effects — reveal on scroll (IntersectionObserver, sin GSAP) ============================================================= */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: none; } .reveal-stagger > * { transition-delay: calc(var(--i, 0) * 70ms); } /* Contador animado */ [data-count-to] { font-variant-numeric: tabular-nums; } /* ============================================================= 8. Responsive tweaks generales ============================================================= */ @media (min-width: 1280px) { .container { padding-inline: var(--gutter); } } /* ============================================================= 9. Reduced-motion — solo lo INTRUSIVO ============================================================= */ @media (prefers-reduced-motion: reduce) { .wa-float-pulse { animation: none; } /* Los reveals, hovers y transiciones de color NO se desactivan */ } /* ========================================================= Menu movil (nav-toggle + mobile-menu) ========================================================= */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; position: relative; flex-shrink: 0; } @media (min-width: 960px) { .nav-toggle { display: none; } } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--cream); transition: transform .25s var(--ease-out), opacity .25s var(--ease-out), background .25s var(--ease-out); } .nav-toggle span { top: 19px; } .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { display: none; flex-direction: column; gap: 0.15rem; position: absolute; top: 100%; left: 0; right: 0; background: rgba(13, 11, 9, 0.98); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 0.5rem var(--gutter) 1.25rem; max-height: calc(100vh - 100%); overflow-y: auto; } .mobile-menu.is-open { display: flex; } .mobile-menu a { padding: 0.9rem 0.1rem; color: var(--cream-2); border-bottom: 1px solid var(--line); font-size: 1rem; } .mobile-menu a.mobile-menu-cta { margin-top: 0.85rem; width: 100%; border-bottom: none; text-align: center; } @media (min-width: 960px) { .mobile-menu { display: none !important; } }