:root{
  --brand:#b57a84;
  --brand-2:#d9a5ad;
  --ink:#3d2b2b;
  --muted:#6b5f5f;
  --bg:#f8f5f4;
  --card:#ffffffcc;
  --border:#e9dfdf;
  --radius:18px;
  --shadow:0 10px 30px rgba(61,43,43,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{width:min(1100px,92%);margin-inline:auto}

/* Header / Nav */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(12px);
  background:linear-gradient(to bottom, rgba(248,245,244,.85), rgba(248,245,244,.65));
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.5px}
.brand span{font-family:"Playfair Display",serif}
.nav-toggle{display:none;font-size:22px;line-height:1;background:transparent;border:0;cursor:pointer}
.nav-links{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:500}
.nav-links a:hover{color:var(--ink)}
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav-links{position:fixed;inset:64px 0 auto 0;background:var(--bg);box-shadow:var(--shadow);padding:18px 24px;display:none;flex-direction:column}
  .nav-links.open{display:flex}
}

/* Typography */
.display{
  font-family:"Playfair Display",serif;
  font-size: clamp(2rem, 2.2rem + 2.4vw, 4.2rem);
  line-height:1.05;
  letter-spacing:.3px;
  margin:0 0 12px;
  text-shadow: 0 2px 24px rgba(181,122,132,.18);
}
.lead{font-size: clamp(1rem, .9rem + .6vw, 1.35rem);color:#5a4c4c;margin:0 0 20px}

/* Sections */
.section{padding:72px 0}
.section.alt{background:linear-gradient(180deg,#fff, #fff0),url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"><circle cx=\"60\" cy=\"60\" r=\"58\" fill=\"none\" stroke=\"%23e9dfdf\" stroke-width=\"2\"/></svg>') top/120px repeat}
.section.accent{background:radial-gradient(1200px 500px at 10% -10%, #f2e6e8, transparent), radial-gradient(1000px 500px at 90% 110%, #f2e6e8, transparent)}
.section-title{font-family:"Playfair Display",serif;font-size:2rem;margin:0 0 8px}
.section-subtitle{color:var(--muted);margin:0 0 26px}

/* Hero */
.hero{
  position:relative;
  background: radial-gradient(800px 300px at 10% -10%, #f2e6e8, transparent),
              radial-gradient(1000px 500px at 90% 110%, #f2e6e8, transparent);
  overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
@media (max-width:560px){.hero-grid{grid-template-columns:1fr}}

.hero-art{position:relative;min-height:360px}
.hero-logo{position:absolute;inset:auto 10% 10% auto;width:min(52%,300px);opacity:.92;filter:drop-shadow(0 10px 30px rgba(181,122,132,.25))}
.orb{position:absolute;filter:blur(30px);opacity:.65;border-radius:999px}
.orb-1{width:320px;height:320px;background:#f1d6dc;right:-40px;top:10px}
.orb-2{width:220px;height:220px;background:#edd0d8;left:-30px;bottom:40px}
.orb-3{width:140px;height:140px;background:#ffe6ec;right:120px;bottom:-20px}

.wave{display:block;width:100%;height:80px}
.wave path{fill:#fff;opacity:.8}

/* Grids */
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

.card{
  background:linear-gradient(180deg,#fff,#fff0);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
  backdrop-filter: blur(2px);
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(61,43,43,.12)}
.card h3{margin:0 0 6px}
.card p{margin:0 0 12px;color:var(--muted)}
.pill-row{display:flex;gap:8px}
.pill{display:inline-block;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:.9rem;color:var(--ink)}

/* Benefits & Testimonials */
.benefits{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.benefits{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.benefits{grid-template-columns:1fr}}
.benefit{padding:18px 16px;border-radius:var(--radius);background:linear-gradient(180deg,#fff,#fff0);border:1px solid var(--border);box-shadow:var(--shadow);text-align:center}

.testimonials{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.testimonials{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.testimonials{grid-template-columns:1fr}}
.quote{margin:0;padding:18px 20px;border-radius:var(--radius);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)}
.quote p{margin:0 0 12px;font-style:italic}
.quote footer{color:var(--muted)}

/* CTA & Buttons */
.cta{text-align:center}
.btn{display:inline-block;padding:12px 18px;border-radius:14px;font-weight:600;text-decoration:none;border:1px solid var(--border)}
.btn-primary{background:var(--brand);color:#fff;border-color:transparent;box-shadow:0 10px 24px rgba(181,122,132,.35)}
.btn-primary:hover{filter:brightness(.98)}
.btn-ghost{background:#fff}
.btn-lg{padding:14px 22px;font-size:1.1rem}

.badges{display:flex;gap:12px;flex-wrap:wrap;padding:0;margin:16px 0 0;list-style:none;color:var(--muted)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* Footer (base) */
.site-footer{padding:36px 0;border-top:1px solid var(--border);background:#fff}
.footer-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:700}
.footer-links{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.footer-links a{text-decoration:none;color:var(--muted)}
.footer-links a:hover{color:var(--ink)}
.copyright{grid-column:1 / -1;color:var(--muted);margin:10px 0 0;text-align:center}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:translateY(0)}

/* ===== UIX Vanguardista / 3D Zen ===== */
:root{
  --shadow-3d: 0 20px 60px rgba(181,122,132,.25);
  --glass: rgba(255,255,255,.65);
}

/* Grain */
.grain{position:absolute; inset:-20%; pointer-events:none; opacity:.06; mix-blend:overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.7'/></svg>");
  animation: grainShift 18s linear infinite;
}
@keyframes grainShift {0%{transform:translate3d(0,0,0) scale(1.1)}100%{transform:translate3d(-10%,-10%,0) scale(1.1)}}

/* Orbs */
.orb{border-radius:999px;filter:blur(22px) saturate(120%);transform-style:preserve-3d;will-change:transform;}
.orb-1{width:340px;height:340px;right:-40px;top:10px;background:radial-gradient(60% 60% at 40% 40%,#fbe9ee,#ebb9c4 60%,#d9a5ad 100%)}
.orb-2{width:240px;height:240px;left:-30px;bottom:40px;background:radial-gradient(60% 60% at 40% 40%,#fff0f4,#f5c6d2 60%,#e2b2be 100%)}
.orb-3{width:160px;height:160px;right:120px;bottom:-10px;background:radial-gradient(60% 60% at 40% 40%,#fff4f7,#ffd9e3 60%,#efc3cf 100%)}

/* Zen ring */
.zen-ring{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.ring{width:min(52vmin,380px);height:min(52vmin,380px);border-radius:50%;border:1.6px solid #e8d8db;
  box-shadow:inset 0 0 40px rgba(255,255,255,.45),0 20px 60px rgba(181,122,132,.18);animation:spinY 22s linear infinite;transform-style:preserve-3d;backdrop-filter:blur(2px)}
.ring-delayed{animation-duration:32s;opacity:.6;transform:rotateX(18deg) rotateZ(6deg)}
@keyframes spinY{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}

/* Logo float + glow */
@keyframes floatZen{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-10px,0) scale(1.01)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes glowZen{0%,100%{filter:drop-shadow(0 18px 46px rgba(181,122,132,.32))}50%{filter:drop-shadow(0 22px 60px rgba(181,122,132,.42))}}
@keyframes fadeZoomIn{0%{opacity:0;transform:scale(.85) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}

.hero-logo{opacity:0;animation:fadeZoomIn 1.8s ease-out forwards,floatZen 6s ease-in-out infinite,glowZen 6s ease-in-out infinite;animation-delay:.3s,2s,2s}

/* Cards glass */
.card{background:var(--glass);backdrop-filter:blur(8px) saturate(125%);box-shadow:var(--shadow-3d)}
.card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 26px 80px rgba(181,122,132,.28)}

/* Divider */
.divider-3d{position:relative;height:100px;background:linear-gradient(180deg,transparent,#fff)}
.divider-3d svg{position:absolute;inset:auto 0 0 0;display:block;width:100%;height:100px}

/* Footer glass */
.site-footer{background:linear-gradient(180deg,#ffffff,#fff8fb);backdrop-filter:blur(6px);box-shadow:0 -10px 40px rgba(181,122,132,.08) inset}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr;text-align:center;row-gap:14px}.footer-brand{justify-content:center}.footer-links{justify-content:center;gap:12px;flex-wrap:wrap}}

/* Sound toggle */
/* === Toggle de sonido (flotante, siempre visible) === */
.sound-toggle{
  position: fixed;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 99999; /* por encima de header/nav */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(61,43,43,.12);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s;
}
.sound-toggle:hover{ transform: translateY(-2px); box-shadow: 0 12px 32px rgba(61,43,43,.16); }
.sound-toggle:active{ transform: translateY(0) scale(.98); }
.sound-toggle.on{
  background: var(--brand);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 32px rgba(181,122,132,.35);
}
@media (max-width:560px){
  .sound-toggle{ padding: 10px 12px; font-size:.95rem; }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){.ring,.ring-delayed,.reveal{animation:none!important}.orb,.depth,.hero-logo{transform:none!important;animation:none!important}}