/* Las fuentes se cargan desde el de cada página (preconnect + preload, patrón tempus): un @import aquí encadenaría 3-4 saltos render-blocking. */ :root { --bone: #f5f2ec; --paper: #fdfcfa; --sand: #eae4d9; --ink: #1c1a17; --stone: #716b62; --line: #ddd6ca; --accent: #b85c38; --success: #28623f; --serif: 'Cinzel', Georgia, serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bone); color: var(--ink); font: 16px/1.55 Archivo, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; } body.cart-open { overflow: hidden; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } img { display: block; max-width: 100%; } .store-wrap { width: min(100% - 40px, 1240px); margin-inline: auto; } .store-kicker { margin: 0 0 18px; color: var(--accent); font: 500 11px/1.2 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; } .store-btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 12px 22px; border: 1px solid var(--ink); border-radius: 2px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; transition: .2s ease; } .store-btn:hover, .store-btn:focus-visible { background: #35312b; } .store-btn.ghost { background: transparent; color: var(--ink); } .store-btn.ghost:hover { background: var(--paper); } .store-btn:disabled { cursor: wait; opacity: .55; } .text-link { color: var(--accent); font-weight: 600; border-bottom: 1px solid currentColor; } .store-nav { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: rgba(245,242,236,.96); backdrop-filter: blur(14px); } .store-nav-inner { min-height: 76px; display: flex; align-items: center; gap: 34px; } .store-logo { display: inline-flex; flex-direction: column; line-height: 1; } .store-logo strong { font: 600 22px Cinzel, serif; letter-spacing: .18em; } .store-logo span { margin-top: 4px; color: var(--stone); font-size: 8px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; } .store-links { display: flex; gap: 28px; margin-left: auto; } .store-links a { position: relative; font-size: 15px; font-weight: 500; } .store-links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform .28s ease; opacity: .9; } .store-links a:hover::after { transform: scaleX(1); } .store-links a:hover { color: var(--accent); } .cart-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; } .cart-link span { min-width: 24px; height: 24px; display: inline-grid; place-items: center; padding-inline: 5px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 11px; } /* CTA de WhatsApp del nav de la tienda: usa el .store-btn oscuro + icono verde (mismo look que .btn-wa del sitio; la tienda no carga piedra.css) */ .store-wa { gap: 9px; white-space: nowrap; } .store-wa::before { content: ""; width: 17px; height: 17px; flex: none; background: url('data:image/svg+xml;utf8,') center/contain no-repeat; } .store-hero { padding: clamp(90px, 12vw, 160px) 0 85px; background: linear-gradient(120deg, #1e1c18, #484137); color: #fff; } .store-hero .store-kicker { color: #d68160; } .store-hero h1, .service-hero h1 { max-width: 900px; margin: 0; font-size: clamp(44px, 7vw, 86px); line-height: .98; letter-spacing: -.045em; } .store-hero p:not(.store-kicker), .service-hero p:not(.store-kicker) { max-width: 660px; margin: 28px 0 0; color: rgba(255,255,255,.8); font-size: clamp(18px, 2vw, 22px); } .store-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .store-hero .store-btn { background: #fff; border-color: #fff; color: var(--ink); } .store-hero .store-btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .store-benefits { border-bottom: 1px solid var(--line); background: var(--paper); } .benefit-grid { min-height: 84px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; } .benefit-grid span { padding: 10px 28px; border-left: 1px solid var(--line); color: var(--stone); font-size: 14px; } .benefit-grid span:first-child { padding-left: 0; border-left: 0; } .benefit-grid b { color: var(--ink); font: 500 11px "JetBrains Mono", monospace; letter-spacing: .12em; } .catalog-section { padding: 100px 0 120px; } .catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; } .catalog-heading h2, .detail-help h2, .service-section h2 { margin: 0; font-size: clamp(34px, 4.7vw, 58px); line-height: 1.04; letter-spacing: -.035em; } .catalog-tools { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; gap: 18px; align-items: end; margin: 48px 0 34px; } .search-field { display: grid; gap: 8px; } .search-field span { color: var(--stone); font: 500 10px "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; } .search-field input { min-height: 48px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink); outline: none; } .search-field input:focus { border-color: var(--ink); } .filter-pills { display: flex; flex-wrap: wrap; gap: 8px; } .filter-pills button { min-height: 42px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink); cursor: pointer; } .filter-pills button:hover, .filter-pills button.active { border-color: var(--ink); background: var(--ink); color: #fff; } [data-results-count] { margin: 0 0 12px; color: var(--stone); font-size: 13px; white-space: nowrap; } .product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .product-card { overflow: hidden; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); } .product-card[hidden] { display: none; } .product-media { aspect-ratio: 1; display: block; overflow: hidden; background: var(--sand); } .product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .product-card:hover .product-media img { transform: scale(1.035); } .product-copy { padding: 20px; } .product-eyebrow { min-height: 2.4em; margin: 0 0 7px; color: var(--accent); font: 500 11px/1.3 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; } .product-card h2 { min-height: 2.5em; margin: 0; font-size: 19px; line-height: 1.25; } .product-spec { min-height: 3em; margin: 10px 0 0; color: var(--stone); font-size: 13px; } .product-price { display: grid; gap: 2px; margin-top: 18px; } .product-price strong { font-size: 18px; } .product-price span { color: var(--stone); font-size: 11px; } .product-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; } .product-actions .text-link { font-size: 14px; border-bottom: 1px solid var(--accent); } .add-cart { min-height: 40px; padding: 9px 15px; border: 1px solid var(--ink); border-radius: 2px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; } .add-cart:hover { background: #35312b; border-color: #35312b; } .empty-state { padding: 45px 20px; border: 1px dashed var(--line); text-align: center; } .price-note { display: grid; grid-template-columns: 170px 1fr; gap: 30px; margin-top: 42px; padding: 28px; border-left: 3px solid var(--accent); background: var(--sand); } .price-note p { max-width: 820px; margin: 0; color: var(--stone); } .product-page { padding: 30px 0 110px; } .crumbs { padding: 22px 0 34px; color: var(--stone); font-size: 12px; } .crumbs ol { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; } .crumbs li + li::before { content: "/"; margin-right: 9px; color: var(--line); } .crumbs a:hover { color: var(--accent); } .product-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: clamp(40px, 7vw, 90px); align-items: start; } .detail-media { position: sticky; top: 105px; overflow: hidden; aspect-ratio: 1; background: var(--sand); } .detail-media img { width: 100%; height: 100%; object-fit: cover; } .detail-copy { padding-top: 20px; } .detail-copy h1 { margin: 0; font-size: clamp(46px, 6vw, 74px); line-height: .98; letter-spacing: -.04em; } .detail-intro { max-width: 580px; margin: 22px 0 0; color: var(--stone); font-size: 18px; } .detail-price { display: grid; gap: 3px; margin: 32px 0; } .detail-price strong { font-size: 29px; } .detail-price span { color: var(--stone); font-size: 13px; } .spec-list { margin: 0; border-top: 1px solid var(--line); } .spec-list div { display: grid; grid-template-columns: 1fr 1.25fr; gap: 15px; padding: 14px 0; border-bottom: 1px solid var(--line); } .spec-list dt { color: var(--stone); } .spec-list dd { margin: 0; font-weight: 600; text-align: right; } .detail-actions { display: grid; grid-template-columns: 100px 1fr; gap: 10px; margin-top: 30px; } .detail-actions label { display: grid; gap: 5px; color: var(--stone); font-size: 11px; } .detail-actions input { min-height: 48px; width: 100%; padding: 10px; border: 1px solid var(--line); background: var(--paper); } .detail-actions .ghost { grid-column: 1 / -1; } .detail-note { margin: 22px 0 0; color: var(--stone); font-size: 12.5px; } .policy-links { display: flex; flex-wrap: wrap; gap: 15px; margin: 18px 0 0; font-size: 12px; } .policy-links a { color: var(--accent); border-bottom: 1px solid currentColor; } .detail-help { margin-top: 100px; padding: 58px; background: var(--sand); } .detail-help h2 { max-width: 760px; } .detail-help .store-btn { margin-top: 28px; } .checkout-page { padding: 40px 0 110px; } .checkout-head { max-width: 820px; padding: 42px 0; } .checkout-head h1 { margin: 0; font-size: clamp(42px, 6vw, 72px); line-height: 1; letter-spacing: -.04em; } .checkout-head p { color: var(--stone); font-size: 18px; } .checkout-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .75fr); gap: 32px; align-items: start; } .checkout-panel { padding: 30px; border: 1px solid var(--line); background: var(--paper); } .checkout-panel h2 { margin: 0 0 22px; font-size: 25px; } .cart-row { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); } .cart-row img { width: 76px; height: 76px; object-fit: cover; } .cart-row h3 { margin: 0; font-size: 15px; } .cart-row p { margin: 4px 0; color: var(--stone); font-size: 12px; } .cart-qty { display: flex; align-items: center; gap: 7px; } .cart-qty button { width: 28px; height: 28px; border: 1px solid var(--line); background: var(--bone); cursor: pointer; } .cart-remove { border: 0; background: transparent; color: var(--accent); font-size: 11px; cursor: pointer; } .cart-total { display: flex; justify-content: space-between; align-items: end; padding-top: 24px; } .cart-total strong { font-size: 27px; } .cart-total span { color: var(--stone); font-size: 12px; } .checkout-form { display: grid; gap: 13px; } .checkout-form label { display: grid; gap: 7px; color: var(--stone); font-size: 12px; } .checkout-form input, .checkout-form select, .checkout-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); background: var(--bone); color: var(--ink); } .checkout-form textarea { min-height: 86px; resize: vertical; } .checkout-choice { display: grid; gap: 10px; margin: 6px 0; } .checkout-choice.compact { margin: 0; } .choice-card { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 15px; border: 1px solid var(--line); cursor: pointer; } .choice-card span { display: grid; color: var(--ink); font-weight: 600; } .choice-card .choice-inline { display: block; } .choice-card a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .choice-card small { margin-top: 2px; color: var(--stone); font-weight: 400; } .checkout-status { display: none; padding: 13px; font-size: 13px; } .checkout-status.show { display: block; } .checkout-status.error { background: #f8e6e1; color: #812e1d; } .checkout-status.ok { background: #e4f0e8; color: var(--success); } .checkout-disclaimer { color: var(--stone); font-size: 11px; } .national-shipping { display: grid; gap: 13px; margin: 2px 0; padding: 17px; border: 1px solid var(--line); background: var(--bone); } .national-shipping[hidden] { display: none; } .national-shipping legend { padding: 0 7px; color: var(--ink); font-family: var(--serif); font-size: 17px; } .national-shipping > p { margin: 0; color: var(--stone); font-size: 11px; line-height: 1.55; } .national-shipping-grid { display: grid; grid-template-columns: minmax(120px, .55fr) minmax(0, 1fr); gap: 10px; } .empty-cart { padding: 45px 0; text-align: center; } .empty-cart p { color: var(--stone); } .service-hero { position: relative; min-height: 720px; display: flex; align-items: end; overflow: hidden; background: var(--ink); color: #fff; } .service-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .64; } .service-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(18,16,13,.88), rgba(18,16,13,.36) 65%, rgba(18,16,13,.1)); } .service-hero .store-wrap { position: relative; z-index: 1; padding-bottom: 90px; } .service-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .service-hero .store-btn { background: #fff; border-color: #fff; color: var(--ink); } .service-hero .store-btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } .service-band { border-bottom: 1px solid var(--line); background: var(--paper); } .service-band .store-wrap { min-height: 82px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; } .service-band span { padding: 0 25px; border-left: 1px solid var(--line); color: var(--stone); font-size: 13px; } .service-band span:first-child { padding-left: 0; border-left: 0; } .service-band b { color: var(--accent); } .service-section { padding: 105px 0; } .service-section.paper { border-block: 1px solid var(--line); background: var(--paper); } .service-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: end; } .service-heading p:last-child { max-width: 560px; margin: 0; color: var(--stone); font-size: 18px; } .category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; } .category-card { overflow: hidden; border: 1px solid var(--line); background: var(--paper); } .category-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .category-card div { padding: 28px; } .category-card h3 { margin: 0; font-size: 23px; } .category-card p { min-height: 4.6em; color: var(--stone); } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px; } .process-card { padding: 30px; border-top: 2px solid var(--accent); background: var(--paper); } .process-card b { color: var(--accent); font: 500 11px "JetBrains Mono", monospace; } .process-card h3 { margin: 18px 0 8px; } .process-card p { margin: 0; color: var(--stone); } .visit-box { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: clamp(38px, 6vw, 75px); background: var(--ink); color: #fff; } .visit-box h2 { max-width: 650px; } .visit-box p { color: rgba(255,255,255,.72); } .visit-form { display: grid; gap: 12px; } .visit-form input, .visit-form select, .visit-form textarea { min-height: 49px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; } .visit-form select option { color: var(--ink); } .visit-form textarea { min-height: 100px; resize: vertical; } .visit-form .visit-consent { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; color: rgba(255,255,255,.75); font-size: 12px; } .visit-form .visit-consent input { width: 17px; min-height: 17px; margin: 2px 0 0; padding: 0; } .visit-form .visit-consent a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .visit-form .store-btn { background: #fff; border-color: #fff; color: var(--ink); } .visit-form-status { display: none; color: #fff; font-size: 13px; } .visit-form-status.show { display: block; } .store-footer { padding: 70px 0 24px; border-top: 1px solid var(--line); background: var(--paper); } .store-footer-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.15fr; gap: 36px; } .store-footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .store-footer p, .store-footer span { color: var(--stone); font-size: 13px; } .store-footer a:not(.store-logo):hover { color: var(--accent); } .store-footer-bottom { margin-top: 50px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--stone); font-size: 11px; } .cart-toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: min(380px, calc(100% - 40px)); padding: 14px 18px; transform: translateY(25px); border-radius: 2px; background: var(--ink); color: #fff; opacity: 0; pointer-events: none; transition: .25s ease; } .cart-toast.show { transform: none; opacity: 1; } .policy-page { padding-bottom: 110px; } .policy-hero { max-width: 900px; padding: 52px 0 58px; border-bottom: 1px solid var(--line); } .policy-hero h1 { max-width: 820px; margin: 0; font-size: clamp(42px, 6vw, 74px); line-height: 1; letter-spacing: -.04em; } .policy-hero > p:not(.store-kicker) { max-width: 760px; margin: 24px 0 0; color: var(--stone); font-size: 18px; } .policy-hero > span { display: block; margin-top: 22px; color: var(--stone); font: 500 10px "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; } .policy-prose { max-width: 850px; padding-top: 34px; } .policy-prose h2 { margin: 44px 0 12px; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; } .policy-prose p, .policy-prose li { color: var(--stone); line-height: 1.72; } .policy-prose strong { color: var(--ink); } .policy-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .policy-prose ul, .policy-prose ol { padding-left: 22px; } .policy-contact { margin-top: 56px; padding: 28px; border-left: 3px solid var(--accent); background: var(--sand); } .policy-contact p { margin: 8px 0 0; } @media (max-width: 1050px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .catalog-tools { grid-template-columns: 1fr; align-items: start; } [data-results-count] { margin: 0; } .process-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 780px) { .store-wrap { width: min(100% - 28px, 1240px); } .store-nav-inner { min-height: 68px; flex-wrap: wrap; column-gap: 18px; row-gap: 0; padding-block: 10px; } .store-links { order: 3; flex-basis: 100%; gap: 18px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .store-links::-webkit-scrollbar { display: none; } .store-links a { white-space: nowrap; font-size: 13px; } .cart-link { margin-left: auto; } .benefit-grid, .service-band .store-wrap { grid-template-columns: 1fr; padding-block: 15px; } .benefit-grid span, .service-band span { padding: 8px 0; border-left: 0; } .catalog-heading, .service-heading { display: grid; grid-template-columns: 1fr; align-items: start; } .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .product-copy { padding: 15px; } .product-card h2 { font-size: 16px; } .product-actions { align-items: stretch; flex-direction: column; } .product-actions .text-link { align-self: flex-start; } .product-detail, .checkout-layout, .visit-box { grid-template-columns: 1fr; } .detail-media { position: static; } .checkout-layout { gap: 16px; } .checkout-panel { padding: 22px; } .national-shipping-grid { grid-template-columns: 1fr; } .category-grid { grid-template-columns: 1fr; } .category-card p { min-height: 0; } .store-footer-grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .store-logo strong { font-size: 19px; } .store-hero { padding-top: 70px; } .store-hero h1, .service-hero h1 { font-size: 43px; } .catalog-section, .service-section { padding: 75px 0; } .product-grid { grid-template-columns: 1fr; } .price-note { grid-template-columns: 1fr; gap: 10px; } .product-detail { gap: 25px; } .detail-help { padding: 34px 24px; } .process-grid { grid-template-columns: 1fr; } .cart-row { grid-template-columns: 64px 1fr; } .cart-row img { width: 64px; height: 64px; } .cart-row > strong { grid-column: 2; } } /* Botón flotante de WhatsApp (lo inyecta js/piedra.js en todas las páginas; estas reglas replican las de piedra.css para el cluster de la tienda) */ .wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: #0b3d24; padding: 13px 18px 13px 15px; border-radius: 100px; box-shadow: 0 8px 26px rgba(0,0,0,.22); font-weight: 600; font-size: 15px; transform: translateY(8px); opacity: 0; transition: opacity .35s ease, transform .35s ease, box-shadow .2s; } .wa-float.show { opacity: 1; transform: none; } .wa-float:hover { box-shadow: 0 10px 30px rgba(37,211,102,.4); } .wa-float svg { width: 24px; height: 24px; fill: #0b3d24; flex: none; } @media (max-width: 600px) { .wa-float { right: 14px; bottom: 14px; padding: 14px; border-radius: 50%; } .wa-float .wa-float-label { display: none; } } @media (prefers-reduced-motion: reduce) { .wa-float { transition: opacity .2s; transform: none; } }