/* /suena · Oye cómo suenan. Tokens en /styles.css; cabecera y pie en /r/recetas.css. */
.sn{--sn-wa:#0E7C41;--sn-wa-hover:#0A6A36;--sn-oro:#F2B632;--sn-noche:#0d1b2a;}
.sn main{overflow-x:clip;}
.sn h2{font-size:clamp(1.6rem,5.6vw,2.4rem);font-weight:800;letter-spacing:-.025em;line-height:1.08;text-wrap:balance;}
.sn .eyebrow{display:block;margin-bottom:.55rem;}

/* ---------- portada: título y, enseguida, los reproductores ---------- */
.sn-hero{padding:clamp(1.1rem,4vw,2.75rem) 0 clamp(1.75rem,5vw,3rem);}
.sn-hero h1{font-size:clamp(2.5rem,11.5vw,4.6rem);font-weight:800;letter-spacing:-.035em;line-height:.98;margin:0;text-wrap:balance;}
.sn-hero h1 em{font-style:normal;color:var(--color-primary);}
.sn-frase{font-size:clamp(1.05rem,2.8vw,1.3rem);line-height:1.45;max-width:34ch;margin:.7rem 0 0;font-weight:600;color:var(--ink-800);}
.sn-toca{display:flex;align-items:center;gap:.6rem;margin:.8rem 0 0;font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--ink-700);}
.sn-onda{display:inline-flex;align-items:flex-end;gap:3px;height:18px;flex:none;}
.sn-onda i{width:4px;border-radius:2px;background:var(--color-primary);animation:sn-onda 1.1s ease-in-out infinite;}
.sn-onda i:nth-child(1){height:45%;animation-delay:-.2s;}
.sn-onda i:nth-child(2){height:100%;animation-delay:-.6s;}
.sn-onda i:nth-child(3){height:65%;animation-delay:-.35s;}
.sn-onda i:nth-child(4){height:85%;animation-delay:-.8s;}
@keyframes sn-onda{0%,100%{transform:scaleY(.35);}50%{transform:scaleY(1);}}
.sn-onda i{transform-origin:50% 100%;}

.sn-fila{display:flex;gap:.9rem;margin-top:1.15rem;padding:.25rem var(--gutter) 1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.sn-fila::-webkit-scrollbar{display:none;}
.sn-pieza{flex:0 0 min(72vw,300px);margin:0;scroll-snap-align:start;}
.sn-marco{position:relative;aspect-ratio:9/16;border-radius:var(--radius-xl);overflow:hidden;background:var(--sn-noche);box-shadow:var(--shadow-lg);}
.sn-marco video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--sn-noche);}
.sn-play{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;display:block;-webkit-tap-highlight-color:transparent;}
.sn-play>span{display:grid;place-items:center;position:absolute;left:50%;top:60%;margin:-38px 0 0 -38px;width:76px;height:76px;border-radius:50%;background:var(--color-primary);color:#fff;box-shadow:0 10px 26px -6px rgba(0,0,0,.55),0 0 0 6px rgba(255,255,255,.22);transition:transform var(--dur-base) var(--ease-spring),opacity var(--dur-base) var(--ease-out);}
.sn-play>span[hidden]{display:none;}
.sn-play svg{width:34px;height:34px;fill:currentColor;}
.sn-play [data-ico-play] svg{margin-left:4px;}
.sn-play:hover>span{transform:scale(1.06);}
.sn-play:focus-visible{outline:3px solid var(--sn-oro);outline-offset:-6px;border-radius:var(--radius-xl);}
.sn-pieza.es-sonando .sn-play>span{opacity:0;}
.sn-pieza.es-sonando .sn-play:hover>span,.sn-pieza.es-sonando .sn-play:focus-visible>span{opacity:.92;}
.sn-pieza figcaption{display:flex;flex-direction:column;gap:.1rem;padding:.7rem .25rem 0;}
.sn-pieza figcaption strong{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;line-height:1.2;}
.sn-pieza figcaption span{font-size:.88rem;color:var(--color-text-muted);}
.sn-nota{margin:.35rem 0 0;font-size:.92rem;color:var(--color-text-muted);max-width:52ch;}
@media (min-width:860px){
  .sn-hero .container:first-child{text-align:center;}
  .sn-frase{margin-inline:auto;max-width:none;}
  .sn-toca{justify-content:center;}
  .sn-fila{overflow:visible;flex-wrap:wrap;justify-content:center;gap:1.5rem;padding-bottom:1.25rem;}
  .sn-pieza{flex:0 0 250px;}
  .sn-nota{margin-inline:auto;text-align:center;}
}

/* ---------- el tuyo: la línea de qué es y el botón ---------- */
.sn-tuyo{background:var(--sn-noche);color:var(--cream-100);padding:clamp(2.25rem,7vw,4.5rem) 0;scroll-margin-top:70px;}
.sn-tuyo .eyebrow{color:var(--sn-oro);}
.sn-tuyo__in{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;}
.sn-que{font-size:clamp(1.05rem,2.6vw,1.2rem);line-height:1.55;max-width:46ch;margin:.9rem 0 0;color:#E9E2D4;}
.sn-que strong{color:#fff;letter-spacing:.04em;}
.sn-cta{margin:1.4rem 0 0;}
.sn-wa{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:58px;padding:.9rem 1.7rem;border-radius:var(--radius-pill);background:var(--sn-wa);color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.08rem;line-height:1.1;box-shadow:0 14px 30px -10px rgba(14,124,65,.75);transition:transform var(--dur-base) var(--ease-spring),background var(--dur-fast) var(--ease-out);}
.sn-wa:hover{background:var(--sn-wa-hover);color:#fff;transform:translateY(-2px);}
.sn-wa svg{width:24px;height:24px;fill:currentColor;flex:none;}
html[data-lang="es"] .sn-wa.lang-en,html[data-lang="en"] .sn-wa.lang-es{display:none;}
.sn-fino{margin:.9rem 0 0;font-size:.88rem;color:#B9B2A4;max-width:44ch;}
.sn-pasos{list-style:none;counter-reset:paso;margin:0;padding:0;display:grid;gap:.75rem;align-content:start;}
.sn-pasos li{counter-increment:paso;position:relative;padding:1rem 1.1rem 1rem 3.6rem;border-radius:var(--radius-lg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);line-height:1.5;color:#E9E2D4;}
.sn-pasos li::before{content:counter(paso);position:absolute;left:1rem;top:1rem;width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;background:var(--sn-oro);color:var(--sn-noche);font-family:var(--font-display);font-weight:800;font-size:.95rem;}
.sn-pasos b{color:#fff;font-family:var(--font-display);font-weight:700;}
@media (max-width:560px){.sn-cta .sn-wa{width:100%;}}
@media (min-width:860px){.sn-tuyo__in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:3.5rem;align-items:center;}}

/* ---------- después: las piezas con precio, sin gritar ---------- */
.sn-despues{padding:clamp(2.25rem,6vw,4rem) 0;}
.sn-despues__intro{margin:.7rem 0 0;max-width:52ch;color:var(--ink-700);}
.sn-precios{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));max-width:56rem;}
.sn-precio{display:flex;flex-direction:column;gap:.45rem;padding:1.25rem 1.35rem;border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);}
.sn-precio h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;}
.sn-precio p{color:var(--ink-700);font-size:.96rem;line-height:1.5;}
.sn-precio .sn-precio__usd{margin-top:auto;padding-top:.5rem;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--color-text-muted);letter-spacing:.02em;}
.sn-licencia{margin:1.1rem 0 0;font-size:.92rem;color:var(--color-text-muted);max-width:56ch;}

/* ---------- la casa ---------- */
.sn-casa{padding:clamp(2rem,6vw,4rem) 0 clamp(2.5rem,7vw,4.5rem);background:var(--cream-200);}
.sn-casa__in{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;align-items:center;}
.sn-maestro{width:min(62vw,260px);height:auto;margin-inline:auto;}
.sn-casa p:not(.eyebrow){margin:.8rem 0 0;max-width:54ch;color:var(--ink-700);}
.sn-casa .sn-casa__links{margin-top:1.2rem;}
@media (min-width:760px){.sn-casa__in{grid-template-columns:300px minmax(0,1fr);column-gap:3rem;}.sn-maestro{width:300px;}}

/* ---------- botón fijo (solo teléfono) ---------- */
.sn-fija{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));background:rgba(251,246,238,.94);backdrop-filter:blur(10px);border-top:1px solid var(--color-border);transform:translateY(110%);transition:transform var(--dur-base) var(--ease-out);}
.sn-fija.es-visible{transform:none;}
.sn-wa--fija{width:100%;min-height:52px;font-size:1rem;box-shadow:none;}
.sn .rw-pie{padding-bottom:6.5rem;}
@media (min-width:860px){.sn-fija{display:none;}.sn .rw-pie{padding-bottom:2.5rem;}}

/* ---------- dedo y teclado: toques de 44 px y foco a la vista ---------- */
.sn .country-toggle{min-width:44px;min-height:44px;}
.sn .rw-nav .btn--sm,.sn .sn-casa__links .btn{min-height:44px;display:inline-flex;align-items:center;}
.sn .rw-pie__links{align-items:center;gap:0 .35rem;}
.sn .rw-pie__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 .3rem;}
html[data-lang="es"] .sn .rw-pie__links a.lang-en,html[data-lang="en"] .sn .rw-pie__links a.lang-es{display:none;}
.sn a:focus-visible,.sn button:focus-visible{outline:3px solid var(--sn-oro);outline-offset:3px;}
.sn .sn-play:focus-visible{outline-offset:-6px;}

@media (prefers-reduced-motion:reduce){.sn-onda i{animation:none;}.sn-play>span,.sn-wa,.sn-fija{transition:none;}}