/* PALETA: modifica estos valores para personalizar toda la página. */
:root { --cream:#f7f3eb; --ink:#392d25; --muted:#74665b; --terracotta:#914b32; --line:#d9cdbf; --sand:#e9dfd1; --serif:'Libre Caslon Display',Georgia,serif; --sans:'DM Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; background:var(--cream); color:var(--ink); font:400 1rem/1.65 var(--sans); }
a { color:inherit; text-decoration:none; }
a:focus-visible, [tabindex]:focus-visible { outline:3px solid var(--terracotta); outline-offset:5px; }
img { display:block; max-width:100%; }
.wrap { width:min(1240px, calc(100% - 112px)); margin-inline:auto; }
.skip-link { position:absolute; top:-100px; left:1rem; z-index:5; padding:.8rem; background:var(--ink); color:white; }
.skip-link:focus { top:1rem; }
.header { display:flex; align-items:center; justify-content:space-between; gap:2rem; min-height:112px; border-bottom:1px solid var(--line); }
.brand { font:400 3.25rem/1 var(--serif); letter-spacing:-.07em; }
.brand-dot { color:var(--terracotta); }
.header nav { margin-left:auto; }
.header nav a { font-size:.9375rem; padding:.6rem 0; }
.header nav a:hover, .footer a:hover { color:var(--terracotta); }
.header nav span { margin-left:.6rem; }
.header-note { color:var(--muted); font-size:.875rem; border-left:1px solid var(--line); padding-left:2rem; }
.welcome { padding-top:68px; padding-bottom:60px; }
.eyebrow { margin:0 0 1.25rem; font-size:.75rem; font-weight:600; letter-spacing:.17em; color:var(--terracotta); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; }
h1 { font-size:clamp(3.5rem,6.1vw,6rem); line-height:1.03; letter-spacing:-.035em; margin-bottom:1.75rem; }
h1 em { color:var(--terracotta); font-weight:400; }
.welcome-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; }
.welcome-bottom p { color:var(--muted); margin:0; }
.collection-link { border-bottom:1px solid var(--terracotta); padding:.6rem 0; white-space:nowrap; font-size:.9375rem; }
.collection-link span { margin-left:2rem; color:var(--terracotta); }
.catalog { padding:38px 0 66px; border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:30px; }
.section-heading .eyebrow { margin-bottom:.35rem; }
h2 { font-size:clamp(2.3rem,3.5vw,3.2rem); line-height:1.15; margin:0; letter-spacing:-.025em; }
.collection-count { font-size:.875rem; color:var(--muted); }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.product-photo { position:relative; overflow:hidden; background:var(--sand); border-radius:150px 150px 4px 4px; }
.product-photo img { width:100%; height:auto; aspect-ratio:1/1.08; object-fit:cover; transition:transform .5s ease; }
.product:hover img { transform:scale(1.035); }
.photo-label { position:absolute; bottom:16px; left:16px; background:var(--cream); color:var(--ink); padding:5px 10px; font-size:.75rem; letter-spacing:.1em; }
.product-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-top:19px; }
h3 { font-size:2.2rem; line-height:1.2; margin-bottom:.5rem; }
.price { font-size:1rem; }
.product-description { font-size:.9375rem; line-height:1.6; color:var(--muted); min-height:3rem; margin-bottom:1.3rem; }
.whatsapp { display:flex; align-items:center; justify-content:center; gap:.7rem; min-height:50px; border:1px solid var(--terracotta); border-radius:3px; color:var(--terracotta); font-size:.875rem; font-weight:500; padding:12px; transition:background .2s,color .2s; }
.whatsapp:hover { background:var(--terracotta); color:var(--cream); }
.whatsapp span { font-size:1.2rem; }
.demo-note { text-align:center; margin:32px 0 0; font-size:.8125rem; color:var(--muted); }
.contact-note { max-width:620px; margin:20px auto 0; text-align:center; font-size:.875rem; color:var(--muted); }
[hidden] { display:none!important; }
.footer { background:var(--sand); border-top:1px solid var(--line); }
.footer-content { display:flex; justify-content:space-between; align-items:center; gap:2rem; padding-block:36px; }
.footer .brand { font-size:2.7rem; }
.footer p { margin:.8rem 0 0; font-size:.875rem; color:var(--muted); }
.footer a:not(.brand) { font-size:.875rem; }
@media (min-width:1000px) { .product { display:flex; flex-direction:column; } .whatsapp { margin-top:auto; } }
@media (max-width:900px) { .wrap { width:calc(100% - 56px); } .header-note { display:none; } .welcome { padding-top:48px; } .product-grid { gap:20px; } .product-description { min-height:4.5rem; } .whatsapp { font-size:.875rem; gap:.35rem; } .whatsapp span { display:none; } .footer-content { flex-wrap:wrap; } }
@media (max-width:680px) { .wrap { width:calc(100% - 40px); } .header { min-height:88px; } .brand { font-size:2.8rem; } .welcome { padding:42px 0 36px; } h1 { font-size:clamp(2.8rem,10vw,4.2rem); } .eyebrow { font-size:.75rem; letter-spacing:.1em; } .welcome-bottom { display:block; } .welcome-bottom p { font-size:1rem; } .collection-link { display:inline-block; margin-top:20px; } .desktop-break { display:none; } .section-heading { display:block; } .collection-count { display:block; margin-top:12px; } .catalog { padding-top:28px; padding-bottom:40px; } .product-grid { grid-template-columns:1fr; gap:36px; } .product-photo { border-radius:160px 160px 4px 4px; } .product-photo img { aspect-ratio:1/1; } .product-description { min-height:0; } .whatsapp { font-size:.9375rem; } .whatsapp span { display:inline; } .footer-content { display:grid; gap:16px; } .footer-content>p { margin:0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }
/* Logotipo tipográfico LLUMMA. */
.brand, .footer .brand { font-family:var(--serif); font-size:2.5rem; letter-spacing:.075em; }
.header nav { display:flex; align-items:center; gap:2rem; }
.brand-description { color:var(--terracotta); font-size:1.125rem; margin-bottom:1.4rem; }
.welcome-bottom strong { color:var(--ink); font-weight:500; }
.category-intro { color:var(--muted); margin:-10px 0 30px; max-width:680px; }
.decoration-feature { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:clamp(28px,5vw,70px); }
.decoration-image { margin:0; }
.decoration-image img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:4px; background:var(--sand); }
.decoration-image figcaption { font-size:.8125rem; color:var(--muted); margin-top:8px; }
.decoration-copy h3 { font-size:clamp(2.2rem,3.5vw,3.1rem); line-height:1.1; margin-bottom:1.2rem; }
.decoration-copy>p:not(.eyebrow) { color:var(--muted); }
.decoration-copy .whatsapp { display:inline-flex; padding-inline:20px; }
@media (max-width:680px) {
  .header { flex-wrap:wrap; justify-content:center; gap:12px; padding-block:22px; }
  .header nav { margin:0; justify-content:center; gap:1.5rem; flex-basis:100%; }
  .header nav a { padding-block:8px; }
  .brand-description { font-size:1rem; }
  .decoration-feature { grid-template-columns:1fr; gap:22px; }
  .decoration-copy .whatsapp { display:flex; }
}