/* Marchissio Studio — colores y tipografías del manual de identidad */
:root{
  --marfil:#F5F1E9;
  --cafe:#4F4942;
  --taupe:#766D63;
  --arena:#EAE4D8;
  --linea:#DDD5C7;
  --texto:#3E3934;
  --radio:22px;
  --sans:'Montserrat', system-ui, sans-serif;
  --serif:'Bodoni Moda', Georgia, serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--marfil);color:var(--texto);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,iframe{max-width:100%}

/* ---------- encabezado ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(245,241,233,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.top-in{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px}
.logo{font-weight:600;letter-spacing:.3em;font-size:15px;text-decoration:none;color:var(--cafe);white-space:nowrap}
.logo small{font-weight:400;font-size:10px;letter-spacing:.28em}
.logo.claro{color:var(--marfil)}
.nav{margin-left:auto;display:flex;gap:26px}
.nav a{text-decoration:none;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe)}
.nav a:hover{color:var(--cafe)}

/* ---------- botones ---------- */
.btn{display:inline-block;background:var(--cafe);color:var(--marfil);text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.06em;padding:15px 28px;border-radius:999px;border:1.5px solid var(--cafe);transition:transform .15s, background .15s}
.btn:hover{transform:translateY(-1px);background:#3d3833}
.btn-sm{padding:9px 18px;font-size:12.5px}
.btn-linea{background:transparent;color:var(--cafe)}
.btn-linea:hover{background:var(--cafe);color:var(--marfil)}
.btn-claro{background:var(--marfil);color:var(--cafe);border-color:var(--marfil)}
.btn-claro:hover{background:#fff}

/* ---------- portada ---------- */
.hero{max-width:1080px;margin:0 auto;padding:56px 20px 64px;text-align:center}
.logo img{height:18px;width:auto;display:block}
.monograma{width:auto;height:120px;display:block;margin:0 auto 30px}
.logo-pie{height:20px;width:auto;display:block;margin:0 auto}
@media (max-width:760px){.logo img{height:14px}.monograma{height:96px}}
.hero h1{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--cafe);font-size:clamp(36px,7vw,64px);line-height:1.08;margin:0 0 18px}
.hero-sub{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);margin:0 auto 30px;max-width:640px}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.prueba{margin-top:28px;font-size:13.5px;color:var(--taupe)}
.prueba span{font-weight:700;color:var(--cafe)}

/* ---------- bloques ---------- */
.bloque{max-width:1080px;margin:0 auto;padding:56px 20px}
.kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin:0 0 4px}
.kicker.claro{color:#D9D1C4}
h2{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--cafe);font-size:clamp(32px,5vw,44px);margin:0 0 28px;line-height:1.1}
h3{font-weight:600;color:var(--cafe);font-size:17px;margin:0 0 8px}

/* servicios */
.grilla{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.grilla{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grilla{grid-template-columns:1fr}}
.servicio.servicio-cta{background:var(--cafe);border-color:var(--cafe)}
.servicio-cta h3,.servicio-cta .num{color:var(--marfil)}
.servicio.servicio-cta p{color:#E2DBCF}
.servicio-cta .acciones{border-top-color:rgba(245,241,233,.2)}
.servicio-cta .acciones a{background:var(--marfil)!important;color:var(--cafe)!important;border-color:var(--marfil)}
.servicio{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:26px 24px 22px;display:flex;flex-direction:column;transition:transform .2s, box-shadow .2s}
.servicio:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(79,73,66,.45)}
.servicio h3{font-size:21px;line-height:1.25;margin-bottom:12px}
.servicio p{font-size:14.5px;color:#5b544d;margin:0 0 18px;flex:1}
.acciones{display:flex;gap:10px;border-top:1px solid var(--arena);padding-top:14px}
.acciones a{flex:1;text-align:center;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.05em;padding:10px;border-radius:999px;border:1.5px solid var(--cafe);color:var(--cafe)}
.acciones a:first-child{background:var(--cafe);color:var(--marfil)}
.acciones a:hover{opacity:.85}

/* gift card */
.gift{background:var(--cafe);color:var(--marfil);border-radius:32px;padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.gift h2{color:var(--marfil);margin-bottom:10px}
.gift p{max-width:520px;margin:0;opacity:.92}

/* visitanos */
.visita{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;align-items:stretch}
.horarios{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:28px}
.horarios h3{margin-top:4px}
.horarios h3 + p{margin:0 0 10px}
dl{margin:0 0 26px}
dl div{display:flex;justify-content:space-between;border-bottom:1px solid var(--arena);padding:9px 0}
dt{color:var(--taupe)} dd{margin:0;font-weight:600;color:var(--cafe)}
.link{font-weight:600;color:var(--cafe);text-decoration:none;border-bottom:1.5px solid var(--cafe)}
.mapa{width:100%;min-height:340px;border:0;border-radius:var(--radio);filter:sepia(.25) saturate(.8)}

/* pie */
.pie{background:var(--cafe);color:var(--marfil);margin-top:40px}
.pie-in{max-width:1080px;margin:0 auto;padding:40px 20px 90px;text-align:center}
.redes{display:flex;gap:22px;justify-content:center;margin:20px 0 14px;flex-wrap:wrap}
.redes a{text-decoration:none;font-size:13px;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.redes a:hover{opacity:1;text-decoration:underline}
.chico{font-size:12px;opacity:.65;margin:0}

/* WhatsApp flotante */
.wa-flotante{position:fixed;right:18px;bottom:18px;z-index:30;width:56px;height:56px;border-radius:50%;background:var(--cafe);color:var(--marfil);display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}
.wa-flotante svg{width:28px;height:28px}

/* ---------- celular ---------- */
@media (max-width:760px){
  .nav{display:none}
  .top-in{justify-content:space-between}
  .hero{padding:40px 16px 48px}
  .bloque{padding:44px 16px}
  .visita{grid-template-columns:1fr}
  .gift{padding:34px 26px}
  .btn{width:100%;text-align:center}
  .btn-sm{width:auto}
}