/* =============================================================
   Páginas de colección y de servicio (generadas por tools/build-seo-pages.js)
   Misma identidad que la home, sin animaciones ni JS: carga rápida e
   indexable. Fuentes desde fonts.css.
   ============================================================= */
:root{
  --beige:#F6F1E9; --paper:#FCFAF6; --deep:#EDE5D8;
  --onyx:#0B0B0B; --ink70:rgba(11,11,11,.72); --ink45:rgba(11,11,11,.5); --line:rgba(11,11,11,.14);
  --plum:#5C1A2B; --plum2:#8A2B3F; --gold:#B8963E;
  --serif:"Playfair Display","Cormorant Garamond",Georgia,serif;
  --serif2:"Cormorant Garamond","Playfair Display",Georgia,serif;
  --sans:"Montserrat",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --pad:clamp(1.25rem,6vw,7rem);
}
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--beige); color:var(--onyx); font:300 clamp(.95rem,.4vw + .85rem,1.05rem)/1.8 var(--sans); -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; height:auto; -webkit-user-drag:none; user-select:none; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.08; margin:0; }
main{ max-width:1400px; margin:0 auto; padding:0 var(--pad); }

.pg-nav{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding:1.25rem var(--pad); border-bottom:1px solid var(--line); }
.pg-brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; font-family:var(--serif); font-size:1.05rem; }
.pg-brand em{ font-style:italic; }
.pg-nav nav{ display:flex; gap:clamp(1rem,3vw,2.5rem); }
.pg-nav nav a{ text-decoration:none; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; }
.pg-nav nav a:hover{ color:var(--plum2); }

.pg-head{ padding:clamp(3rem,10vh,6rem) 0 clamp(2rem,5vh,3rem); }
.pg-crumbs{ font-size:.72rem; letter-spacing:.06em; color:var(--ink45); margin-bottom:2rem; }
.pg-crumbs a{ text-decoration:none; }
.pg-crumbs a:hover{ color:var(--plum2); }
.pg-crumbs span{ margin:0 .35rem; }
.pg-eyebrow{ font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin:0 0 1.25rem; }
.pg-title{ font-size:clamp(2.5rem,7vw,6rem); letter-spacing:-.015em; }

.pg-intro{ max-width:62ch; padding-bottom:clamp(2.5rem,6vh,4rem); border-bottom:1px solid var(--line); }
.pg-intro p{ color:var(--ink70); }
.pg-tag{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink45) !important; }
.pg-lead{ font-family:var(--serif2); font-style:italic; font-size:clamp(1.2rem,2vw,1.55rem); line-height:1.55; color:var(--onyx) !important; }

.pg-btn{ display:inline-block; margin-top:1.25rem; padding:1rem 2.2rem; background:var(--plum); color:var(--beige); text-decoration:none; font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; transition:background .4s; }
.pg-btn:hover{ background:var(--plum2); }

.pg-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,6vw,6rem); padding:clamp(2.5rem,7vh,4.5rem) 0; border-bottom:1px solid var(--line); }
.pg-cols h2,.pg-gallery h2,.pg-steps h2{ font-family:var(--sans); font-weight:400; font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-bottom:1.25rem; }
.pg-cols p{ margin:0; color:var(--ink70); }
.pg-swatches{ display:flex; gap:.6rem; list-style:none; padding:0; margin:1.25rem 0 0; }
.pg-swatches li{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line); }
.pg-specs{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.75rem 1.5rem; margin:0; font-size:.92rem; }
.pg-specs dt{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink45); padding-top:.25rem; }
.pg-specs dd{ margin:0; }

.pg-steps{ padding:clamp(2.5rem,7vh,4.5rem) 0; border-bottom:1px solid var(--line); }
.pg-steps ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.25rem,3vw,2.5rem); }
.pg-steps li span{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--gold); }
.pg-steps h3{ font-size:1.3rem; margin:.5rem 0; }
.pg-steps p{ margin:0; color:var(--ink70); font-size:.92rem; }

.pg-gallery{ padding:clamp(2.5rem,7vh,4.5rem) 0; }
.pg-masonry{ columns:3 260px; column-gap:1rem; }
.pg-masonry figure{ margin:0 0 1rem; break-inside:avoid; background:var(--deep); }
.pg-grid4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.pg-grid4 figure{ margin:0; }
.pg-grid4 img{ width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--deep); }
.pg-grid4 figcaption{ margin-top:.7rem; font-size:.8rem; color:var(--ink45); line-height:1.5; }

.pg-cta{ text-align:center; background:var(--onyx); color:var(--beige); margin:0 calc(var(--pad) * -1); padding:clamp(4rem,12vh,7rem) var(--pad); }
.pg-cta h2{ font-size:clamp(2rem,5vw,3.75rem); margin-bottom:1rem; }
.pg-cta p{ color:rgba(246,241,233,.7); max-width:46ch; margin:0 auto; }

.pg-more{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; padding:clamp(3rem,8vh,5rem) 0; }
.pg-more h2{ font-family:var(--sans); font-weight:400; font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.pg-more a{ display:block; font-family:var(--serif); font-size:1.35rem; text-decoration:none; padding:.4rem 0; border-bottom:1px solid var(--line); }
.pg-more a:hover{ color:var(--plum2); font-style:italic; }

.pg-foot{ background:var(--onyx); color:rgba(246,241,233,.6); padding:2.5rem var(--pad); font-size:.82rem; border-top:1px solid rgba(212,175,55,.28); }
.pg-foot p{ margin:.35rem 0; }
.pg-foot strong{ color:var(--beige); font-weight:400; font-family:var(--serif); }
.pg-foot a{ text-decoration:none; }
.pg-foot a:hover{ color:var(--gold); }

@media (max-width:900px){
  .pg-steps ol,.pg-grid4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .pg-cols,.pg-more{ grid-template-columns:1fr; }
  .pg-nav nav{ gap:1rem; }
}