:root{
  --marfil:#f7f3ec; --arena:#ebe3d4; --piedra:#cfc6b4; --verde:#2f4a3c; --musgo:#5e7a5f;
  --grafito:#23272a; --terracota:#9c5a40; --gris:#4d544f;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--marfil);color:var(--grafito);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.narrow{width:min(760px,100% - 40px)}
.center{text-align:center}
h1,h2,h3{font-family:var(--serif);color:var(--verde);font-weight:500;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,4vw,2.7rem);letter-spacing:-.01em}
h3{font-size:1.35rem}
p{margin:0 0 1em}
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terracota);font-weight:600;margin-bottom:1rem}
.eyebrow.light{color:#e3c9b8}
.lead{font-size:1.2rem;color:var(--gris);max-width:34em}
.fine{font-size:.85rem;color:var(--gris)}
.fine.light{color:#d6e0d7}
.ph{background:#fff1c9;color:#5a4300;padding:.05em .35em;border-radius:5px;font-style:normal}
.note{font-size:.88rem}
.skip{position:absolute;left:-999px;top:0;background:var(--verde);color:#fff;padding:.7rem 1rem;z-index:99}
.skip:focus{left:10px;top:10px}
:focus-visible{outline:3px solid var(--terracota);outline-offset:3px}

.top{position:sticky;top:0;z-index:20;background:rgba(247,243,236,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--arena)}
.bar{position:static;display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:1rem}
.brand{font-size:1.1rem;font-family:var(--serif);font-size:1.3rem;color:var(--verde);text-decoration:none}
nav{display:flex;align-items:center;gap:1.4rem}
nav a:not(.btn){color:var(--grafito);text-decoration:none;font-size:.95rem}
nav a:not(.btn):hover{color:var(--terracota)}
.menu-btn{display:none;background:none;border:1px solid var(--piedra);border-radius:999px;padding:.5rem 1rem;font:inherit;color:var(--verde);cursor:pointer}

.btn{display:inline-block;background:var(--verde);color:#fff;text-decoration:none;padding:.95rem 1.7rem;border-radius:999px;font-weight:600;font-size:1rem;border:2px solid var(--verde);transition:background .2s,color .2s;min-height:48px}
.btn:hover{background:#1f3328}
.btn-sm{padding:.55rem 1.2rem;min-height:0;font-size:.92rem}
.btn-ghost{background:transparent;color:var(--verde)}
.btn-ghost:hover{background:var(--verde);color:#fff}
.btn-light{background:var(--marfil);color:var(--verde);border-color:var(--marfil);margin:1rem 0}
.btn-light:hover{background:#fff}
.link{color:var(--verde);font-weight:600;text-underline-offset:4px}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.6rem 0 1rem}

.hero{padding:clamp(2rem,6vw,5rem) 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero-art{margin:0}
.hero-art img{border-radius:300px 300px var(--r) var(--r);box-shadow:0 30px 60px -30px rgba(47,74,60,.45)}
.hero-art figcaption{margin-top:.6rem}

section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.band{background:var(--arena)}
.two{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.portrait{aspect-ratio:4/5;border-radius:200px 200px var(--r) var(--r);background:var(--piedra);display:grid;place-items:center;text-align:center;padding:1rem}
.facts{margin:1.5rem 0}
.facts div{padding:.8rem 0;border-top:1px solid var(--piedra)}
.facts dt{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.facts dd{margin:.2rem 0 0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem;margin:2rem 0}
.card{background:#fff;border:1px solid var(--arena);border-radius:var(--r);padding:1.8rem}
.card p{font-size:.97rem;margin-bottom:.7rem}
.mods{display:grid;gap:1.2rem}
.mod{background:var(--marfil);border-radius:var(--r);padding:1.6rem}

.steps{list-style:none;counter-reset:s;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem}
.steps li{counter-increment:s;border-top:2px solid var(--verde);padding-top:1rem}
.steps li::before{content:"0" counter(s);font-family:var(--serif);font-size:1.8rem;color:var(--terracota)}

details{border-top:1px solid var(--piedra);padding:1rem 0}
details:last-of-type{border-bottom:1px solid var(--piedra)}
summary{cursor:pointer;font-weight:600;color:var(--verde);list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:.8rem 0 0}

.contact{background:var(--verde);color:#fff}
.contact h2{color:#fff}
footer{background:#1a2a21;color:#d6e0d7;padding:2.2rem 0;font-size:.88rem}
footer a{color:#fff}
footer p{margin:0 0 .6rem}
.legal{padding:3rem 0}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:var(--grafito);color:#fff;padding:.8rem 1.2rem;border-radius:12px;opacity:0;pointer-events:none;transition:.3s;z-index:50;max-width:90%}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:860px){
  .hero-grid,.two{grid-template-columns:1fr}
  .hero-art{max-width:420px;margin-inline:auto}
  .menu-btn{display:block}
  nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--marfil);flex-direction:column;align-items:flex-start;padding:1.2rem 20px 1.6rem;border-bottom:1px solid var(--arena)}
  nav.open{display:flex}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.price{font-family:var(--serif);font-size:1.25rem;color:var(--verde);margin:.8rem 0 .4rem!important}

/* ---- Refinamiento inspirado en referencias ---- */
body{background:#fbf8f1}
em{font-style:italic;color:var(--musgo)}
.top{background:transparent;border:0;backdrop-filter:none;padding-top:14px}
.top .bar{background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border:1px solid var(--arena);border-radius:999px;padding:0 10px 0 26px;min-height:60px;box-shadow:0 8px 30px -18px rgba(47,74,60,.4);width:min(1040px,100% - 28px)}
.hero{padding-top:1rem}
.hero-shell{background:linear-gradient(160deg,#dfe8da,#cfdcc9 55%,#e8e3d3);border-radius:44px;padding:clamp(1.6rem,5vw,4rem);width:min(1180px,100% - 24px)}
.hero-art{position:relative}
.hero-art img{box-shadow:0 30px 60px -30px rgba(31,51,40,.6)}
.glass{position:absolute;left:-14%;bottom:20%;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border-radius:20px;padding:1rem 1.2rem;display:grid;gap:.15rem;font-size:.9rem;box-shadow:0 18px 40px -22px rgba(31,51,40,.6);max-width:240px}
.glass span{white-space:nowrap}.glass strong{font-family:var(--serif);color:var(--verde);font-size:1.15rem;font-weight:500}
.bar-mini{height:3px;width:44%;background:var(--verde);border-radius:3px;margin-top:.4rem}
.statement{padding-block:clamp(3rem,7vw,5.5rem)}
.pill{display:inline-block;background:var(--arena);color:var(--gris);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .9rem;border-radius:999px;margin-bottom:1.4rem}
.big{font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.3;color:var(--grafito)}
.big span{color:#8a948c}
.card{position:relative;border-radius:30px;padding:2rem 1.8rem}
.card .shape{width:54px;height:54px;fill:var(--musgo);opacity:.55;margin-bottom:1rem}
.card:nth-child(even){background:var(--verde);color:#e8efe9;border-color:var(--verde)}
.card:nth-child(even) h3,.card:nth-child(even) .price,.card:nth-child(even) .link{color:#fff}
.card:nth-child(even) .shape{fill:#cfdcc9}
.card:nth-child(3n){background:#dfe8da;border-color:#dfe8da}
.card:nth-child(3n) .shape{fill:var(--verde)}
.tiles{counter-reset:s}
.tiles li{border:0;border-radius:28px;padding:1.8rem;text-align:left;min-height:210px;background:var(--verde);color:#e8efe9}
.tiles li:nth-child(2){background:var(--musgo);color:#fff}
.tiles li:nth-child(3){background:#cfdcc9;color:var(--grafito)}
.tiles li:nth-child(4){background:var(--arena);color:var(--grafito)}
.tiles li h3{color:inherit}
.tiles li::before{color:inherit;opacity:.7}
.contact{margin:0 12px 1.5rem;border-radius:44px;background:radial-gradient(circle at 80% 10%,#4b6a57,var(--verde) 60%)}
.band{border-radius:44px;margin:0 12px}
.portrait{background:linear-gradient(180deg,#dfe8da,var(--piedra))}
@media(max-width:860px){
  .glass{left:50%;transform:translateX(-50%);bottom:-18px;width:86%;max-width:none}
  .hero-shell{border-radius:30px}
  nav{top:calc(100% + 6px);border-radius:24px;border:1px solid var(--arena)}
  .top .bar{padding-left:18px}
  .band,.contact{border-radius:30px}
}

.portrait{display:block;aspect-ratio:auto;padding:0;margin:0;background:none}
.portrait img{width:100%;border-radius:200px 200px 28px 28px;aspect-ratio:4/5;object-fit:cover}
.portrait figcaption{margin-top:.5rem}
.contact{background:linear-gradient(rgba(31,51,40,.82),rgba(31,51,40,.88)),url(assets/contacto.jpg) center/cover}

.link{display:inline-block;padding:.6rem 0;min-height:44px}
summary{min-height:44px;align-items:center}