/* Lavanda: Cormorant for display, Manrope for reading. Film remains full bleed. */
@font-face{font-family:Cormorant;src:url(fonts/cormorant-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/manrope.woff2) format('woff2');font-weight:200 800;font-display:swap}
:root{--plum:#35263e;--ink:var(--plum);--paper:#fff;--lav:#725c81;--sky:#f3d9cf;--ease:cubic-bezier(.16,1,.3,1);
  --sans:Manrope,'Helvetica Neue',Arial,sans-serif;
  /* la bolsa de cristal (shop/checkout.css) con los colores de la marca */
  --gold:#b98be6;--gold-hi:#e2ccf7;--ivory:#fbf6ff;--muted:#cdbbdc;--serif:Cormorant,Georgia,serif}
*{box-sizing:border-box;margin:0}
html{background:var(--sky);-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--sky);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
a:focus-visible,button:focus-visible{outline:3px solid var(--lav);outline-offset:4px;border-radius:6px}
/* cabecera: cada pieza cambia de tinta segun lo que tiene DEBAJO (medido por fotograma, lavanda.js > TONOS) */
.logo,.header nav,.bag-slot{--ink:var(--plum);color:var(--ink);text-shadow:0 0 14px rgba(255,238,232,.55);transition:color .35s}
body[data-tl=dark] .logo,body[data-tn=dark] .header nav,body[data-tp=dark] .bag-slot{--ink:#fff;text-shadow:0 1px 14px rgba(38,12,52,.5)}

/* ---------- la pelicula, a pantalla completa, detras de todo ---------- */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--sky)}
#film,.poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.poster{object-fit:cover}
body:not(.loading) .poster{opacity:0;transition:opacity .4s}
.velo{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.velo-left{background:linear-gradient(90deg,rgba(38,12,52,.62) 0%,rgba(38,12,52,.42) 24%,rgba(38,12,52,0) 46%)}
.velo-bottom{background:linear-gradient(0deg,rgba(38,12,52,.66) 0%,rgba(38,12,52,.38) 26%,rgba(38,12,52,0) 46%)}
body.velo-left .velo-left,body.velo-bottom .velo-bottom{opacity:1}
.loadline{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom));width:96px;height:3px;margin-left:-48px;background:rgba(42,18,56,.18);border-radius:3px;overflow:hidden;transition:opacity .5s}
.loadline i{display:block;height:100%;background:var(--plum);transform-origin:0 50%;transform:scaleX(0)}
body:not(.loading) .loadline{opacity:0}

/* ---------- cabecera: transparente, sobre la pelicula ---------- */
.header{position:fixed;z-index:10;top:0;left:0;right:0;height:64px;padding:env(safe-area-inset-top) 18px 0;display:flex;align-items:center;gap:14px}
.logo{font-size:24px;font-weight:400;letter-spacing:-.05em;margin-right:auto}
.header nav{display:none}
.buy-pill{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:42px;background:var(--plum);color:#fff;font-size:15px;font-weight:500;transition:background .4s,color .4s}
body[data-tp=dark] .buy-pill{background:#fff;color:var(--plum)}
.buy-pill span{opacity:.7}
.bag-slot{display:flex}
.co-bagbtn{color:var(--ink)!important;border-color:currentColor!important}

/* ---------- recorrido: el scroll mueve la pelicula; los textos van fijos encima ---------- */
main{position:relative;z-index:2;height:calc(var(--len,1050) * 1svh)}
.txt{position:fixed;z-index:3;opacity:0;visibility:hidden;pointer-events:none}
.txt.on{visibility:visible;pointer-events:auto}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.w>span{display:inline-block;transform:translateY(105%);will-change:transform}

.beat{left:20px;right:20px;bottom:max(40px,calc(env(safe-area-inset-bottom) + 30px));color:var(--plum);text-align:center}
.beat .s{margin-left:auto;margin-right:auto}.beat .num,.beat .ctas{justify-content:center}
.beat.on-dark{color:#fff}
.k{font-size:13px;font-weight:400;letter-spacing:.16em;margin-bottom:14px}
.giant{font-size:clamp(64px,21vw,250px);font-weight:400;letter-spacing:-.06em;line-height:.86;white-space:nowrap}
.big{font-size:clamp(40px,11vw,150px);font-weight:400;letter-spacing:-.05em;line-height:.92}
.s{font-size:18px;font-weight:400;line-height:1.3;margin-top:16px;max-width:26ch}
.num{display:flex;align-items:baseline;gap:.1em}
.num b{font-weight:400}
.num small{font-size:.3em;letter-spacing:-.03em;font-weight:400}
.ctas{display:flex;align-items:center;gap:22px;margin-top:22px}
.cta{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 28px;border-radius:56px;background:var(--plum);color:#fff;font-size:17px;font-weight:500;box-shadow:0 10px 30px rgba(42,18,56,.25);transition:transform .35s var(--ease),box-shadow .35s}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(42,18,56,.32)}
.cta b{font-weight:500;opacity:.7}
.cta2{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:500}

/* movil: la portada parte el texto como los heroes de motionsites; el nombre arriba sobre el cielo y el boton
   abajo sobre la piedra. El ritual va abajo en blanco sobre el campo, con velo. */
.hero{top:calc(env(safe-area-inset-top) + 84px);bottom:max(36px,calc(env(safe-area-inset-bottom) + 26px));display:flex;flex-direction:column}
.hero .giant{font-size:clamp(64px,19.5vw,250px)}
.hero .s{font-size:17px;margin-top:12px;max-width:none;white-space:nowrap}
.hero .ctas{position:absolute;left:0;right:0;bottom:0;justify-content:center;margin:0}
.hero .cta2{display:none}
.beat.top{color:#fff}

/* ---------- catalogo: sigue sobre el ultimo plano de la pelicula (el agua), sin fondo propio ---------- */
.agua{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease);pointer-events:none;
  background:radial-gradient(120% 90% at 50% 60%,rgba(244,236,250,.9),rgba(234,221,246,.8) 60%,rgba(218,198,238,.7))}
/* en el catalogo el contenido pasa por debajo de la cabecera: un degradado del mismo agua la separa */
.header:before{content:'';position:absolute;inset:0 0 -26px;z-index:-1;opacity:0;transition:opacity .6s;background:linear-gradient(rgba(240,230,248,.96),rgba(240,230,248,.8) 60%,rgba(240,230,248,0))}
body.en-catalogo .header:before{opacity:1}
body.en-catalogo .agua{opacity:1}
.catalog{position:relative;z-index:3;padding:18svh 20px 16svh;text-align:center;color:var(--plum)}
.catalog .k{margin-bottom:16px}
.catalog h2{font-size:clamp(46px,13vw,150px);font-weight:400;letter-spacing:-.055em;line-height:.9}
.catalog .lead{font-size:18px;font-weight:400;margin:18px auto 0;max-width:30ch}
.items{display:grid;gap:56px;margin:64px auto 0;max-width:1240px}
.item{display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(60px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.item.visto{opacity:1;transform:none}
.item:nth-child(2){transition-delay:.12s}.item:nth-child(3){transition-delay:.24s}
.pieza{position:relative;height:300px;width:100%;display:flex;justify-content:center;align-items:flex-end}
.pieza img{position:relative;z-index:1;height:100%;width:auto;filter:drop-shadow(0 26px 22px rgba(70,30,100,.28));animation:flota 6s ease-in-out infinite}
.pieza.small img{height:72%}
.pieza.duo img{height:92%}.pieza.duo img+img{height:76%;margin-left:-34px;animation-delay:-3s}
.item:nth-child(2) .pieza img{animation-delay:-2s}
/* el anillo de agua bajo cada pieza: la misma superficie de la pelicula */
.pieza:before,.pieza:after{content:'';position:absolute;left:50%;bottom:-14px;width:220px;height:46px;margin-left:-110px;border-radius:50%;
  border:2px solid rgba(255,255,255,.75);box-shadow:0 0 18px rgba(255,255,255,.5),inset 0 0 14px rgba(160,120,200,.25);animation:onda 4.5s ease-out infinite}
.pieza:after{animation-delay:-2.25s}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes onda{0%{transform:scale(.45);opacity:0}25%{opacity:1}100%{transform:scale(1.35);opacity:0}}
.item h3{font-size:30px;font-weight:400;letter-spacing:-.04em;margin-top:40px}
.item .meta{font-size:16px;font-weight:400;margin-top:6px}
.item .row{display:flex;align-items:center;gap:16px;margin-top:18px}
.item .price{font-size:30px;font-weight:400;letter-spacing:-.03em}
.add{height:52px;padding:0 24px;border-radius:52px;background:var(--plum);color:#fff;font-size:16px;font-weight:500;display:inline-flex;align-items:center;gap:12px;transition:transform .3s var(--ease),background .3s}
.add:hover{background:var(--lav)}.add:active{transform:scale(.97)}
.add b{font-size:22px;font-weight:500}
.perks{font-size:15px;font-weight:500;margin-top:70px}
/* al pasar el raton: la pieza sube, se inclina hacia el cursor, se enciende un halo lila y las ondas se avivan */
.pieza{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .7s var(--ease)}
.halo{position:absolute;left:50%;bottom:4%;width:260px;height:260px;margin-left:-130px;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.7);
  background:radial-gradient(closest-side,rgba(190,150,240,.65),rgba(190,150,240,0));filter:blur(8px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.item h3,.item .meta{transition:transform .6s var(--ease)}
@media(hover:hover){
  .item:hover .pieza{--lift:-16px;transition:transform .25s ease-out}
  .item:hover .halo{opacity:1;transform:scale(1.05)}
  .item:hover .pieza:before,.item:hover .pieza:after{border-color:rgba(255,255,255,.95);animation-duration:2.2s}
  .item:hover .pieza img{filter:drop-shadow(0 40px 30px rgba(70,30,100,.32)) brightness(1.06)}
  .item:hover h3{transform:translateY(-4px)}
  .item:hover .add{background:var(--lav)}
}

/* ---------- pie: cristal flotando sobre el agua del ultimo plano (Alex 26-oct: "el footer es una mierda con el
   logo tan grande, mejor con efecto cristalino y mejor layout"). La pelicula ya esta quieta aqui: el blur no repinta. */
.site-footer{position:relative;z-index:4;margin:0 12px max(12px,env(safe-area-inset-bottom));padding:30px 22px 22px;border-radius:28px;color:var(--plum);
  background:linear-gradient(140deg,rgba(255,255,255,.42),rgba(255,255,255,.16) 55%,rgba(232,214,248,.3));
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 30px 70px -30px rgba(60,20,90,.35)}
.foot-logo{font-size:30px;font-weight:400;letter-spacing:-.05em}
.foot-brand p{font-size:15px;font-weight:500;margin-top:8px;max-width:26ch;opacity:.8}
.foot-top{display:inline-flex;align-items:center;gap:8px;margin-top:18px;height:42px;padding:0 18px;border-radius:42px;font-size:14px;font-weight:500;
  border:1px solid rgba(42,18,56,.2);transition:background .3s,border-color .3s}
.foot-top:hover{background:rgba(255,255,255,.45);border-color:rgba(42,18,56,.35)}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(42,18,56,.12)}
.cols h4{font-size:12px;font-weight:500;letter-spacing:.08em;margin-bottom:12px;opacity:.6}
.cols a{display:block;font-size:15px;font-weight:400;margin-bottom:9px;transition:opacity .3s}
.cols a:hover{opacity:.6}
.legal{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(42,18,56,.12);font-size:12px;font-weight:400;opacity:.65}

/* ---------- la bolsa y el pago con la ropa de Lavanda: cristal claro y tinta ciruela. Antes era cristal oscuro casi
   invisible sobre el agua lila (Alex: "se me pone la pantalla oscura y no puedo hacer nada"). ---------- */
:root{--co-ink:#2a1238;--co-muted:#6b5680;--co-line:rgba(42,18,56,.12);--co-glass:rgba(250,245,255,.9);--co-field:rgba(42,18,56,.04);
  --co-accent:#7d4fb3;--co-accent-hi:#4c2a72;--co-serif:var(--serif);--co-sans:var(--sans)}
.co-scrim{background:rgba(42,18,56,.28)!important;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.co-bag{border-left:1px solid rgba(255,255,255,.7)!important;box-shadow:-30px 0 80px -30px rgba(42,18,56,.35)}
.co-bag h2{font-weight:400!important;letter-spacing:-.03em!important}
.co-bag h2 small,.co-line p,.co-line .rm,.co-row,.co-f label,.co-brand,.co-steps,.co-back{letter-spacing:.06em!important}
.co-line p,.co-line .rm,.co-row{font-size:.72rem!important}
.co-x{width:44px!important;height:44px!important;background:rgba(42,18,56,.06)!important}
.co-line h3{font-weight:500!important;font-size:1.05rem!important}
.co-line .th{background:radial-gradient(70% 60% at 50% 45%,rgba(207,178,240,.5),transparent 72%),#efe4f7!important;border-color:rgba(42,18,56,.08)!important}
.co-line .amt,.co-row strong,.co-total strong,.co-opt b{font-weight:500!important}
.co-cta{color:#fff!important;background:linear-gradient(100deg,#4c2a72,#7d4fb3)!important;box-shadow:0 14px 34px -12px rgba(76,42,114,.6)!important;
  border-radius:56px!important;font-size:.82rem!important;letter-spacing:.06em!important;font-weight:500!important}
.co-panel::before{background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.4) 40%,rgba(207,178,240,.6))!important}
.co-steps li.now i{color:#fff!important}
.co-in input::placeholder{color:rgba(42,18,56,.35)!important}
.co-summary,.co-total{background:rgba(42,18,56,.03)!important}
.co-in:focus-within{box-shadow:0 0 0 3px rgba(125,79,179,.18)!important}

/* ---------- PC: la toma apaisada; texto en el hueco que deja cada plano ---------- */
@media(min-aspect-ratio:1/1){
  .header{height:84px;padding:0 4.5vw;gap:30px}
  .logo{font-size:30px}
  .header nav{display:flex;gap:34px;font-size:16px;font-weight:500;margin-right:12px}
  .header nav a{position:relative;padding:6px 0}.header nav a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}.header nav a:hover:after,.header nav a.on:after{transform:none}
  .buy-pill{height:48px;padding:0 24px;font-size:16px}
  .beat{left:4.5vw;right:auto;bottom:auto;top:24vh;max-width:44vw}
  .k{font-size:15px}
  .giant{font-size:clamp(80px,9.6vw,230px)}
  .big{font-size:clamp(54px,5.4vw,124px)}
  .s{font-size:21px;max-width:34vw}
  /* portada centrada: el nombre arriba sobre el cielo (medido: 0,91 de luz) y la linea y el boton debajo del frasco */
  .hero{top:10.2vh;bottom:5vh;left:0;right:0;max-width:none;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--plum)}
  /* el nombre cabe entero en la franja de cielo (8-20 % de alto, luz 0,91); la etiqueta baja con la linea */
  .hero .giant{font-size:clamp(70px,6vw,170px);order:0}
  .hero .k{order:1;margin:auto 0 0}
  .hero .s{font-size:22px;margin-top:10px;order:2}
  .hero .ctas{order:3}
  .hero .ctas{position:static;justify-content:center;margin-top:18px}
  .hero .cta2{display:inline-flex}
  .cta{height:64px;padding:0 34px;font-size:19px}.cta2{font-size:19px}
  /* los demas textos, en el hueco que deja el producto y centrados en su altura */
  .beat:not(.hero){text-align:left}.beat:not(.hero) .num{justify-content:flex-start}.beat:not(.hero) .s{margin-left:0}
  .beat.top{top:16vh;color:var(--plum)}
  .beat.right{left:auto;right:4.5vw;top:auto;bottom:12vh;text-align:right!important}
  .beat.right .num{justify-content:flex-end!important}
  .beat.right .s{margin-left:auto!important}
  .catalog{padding:22vh 4.5vw 16vh}
  .catalog h2{font-size:clamp(60px,6.4vw,150px)}
  .catalog .lead{font-size:21px}
  .items{grid-template-columns:repeat(3,1fr);gap:4vw;margin-top:9vh}
  .pieza{height:min(40vh,380px)}
  .site-footer{margin:0 4.5vw 3vh;padding:44px 48px 26px;display:grid;grid-template-columns:1.1fr 1.6fr;column-gap:6vw}
  .cols{margin-top:0;padding-top:0;border-top:0}
  .legal{grid-column:1/-1;margin-top:40px}
}
@media(prefers-reduced-motion:reduce){.w>span{transform:none!important}*{transition:none!important}}
/* en tactil checkout.css pone el panel macizo y casi negro (rgba(10,20,30,.94)): ese era el "pantalla oscura" del iPhone */
@media(pointer:coarse){.co-bag,.co-panel::after{background:rgba(250,245,255,.98)!important}}

/* Typography and placement follow the negative space of each shot. */
.logo,.foot-logo{font-family:var(--serif);font-weight:400;letter-spacing:.015em;text-shadow:none}
.logo{font-size:32px}.foot-logo{font-size:36px}
.giant,.big,.catalog h2,.item h3{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;line-height:.98}
.w{padding:.05em .055em .15em;margin:-.05em -.055em -.15em;vertical-align:baseline}
.k{font-size:10px;font-weight:500;letter-spacing:.2em;line-height:1.5;margin-bottom:14px}
.s{font-size:14px;line-height:1.65;max-width:30ch;margin-top:18px;font-weight:400}
.big{font-size:clamp(42px,11.8vw,70px)}
.giant{white-space:normal}
.hero{top:calc(64px + 2svh);bottom:max(30px,calc(env(safe-area-inset-bottom) + 24px));left:20px;right:20px;align-items:center}
.hero .k{margin-bottom:8px}
.hero .giant{font-size:clamp(46px,12.8vw,78px);line-height:.91;letter-spacing:-.04em}
.hero .s{font-size:12px;line-height:1.5;margin-top:12px;white-space:normal}
.hero .ctas{bottom:0}
.cta,.add{border-radius:3px;box-shadow:none;font-size:13px;font-weight:500;height:50px;padding:0 23px}
.cta{gap:20px}.cta b{font-weight:400;opacity:.75}
.cta:hover{box-shadow:0 6px 18px rgba(42,18,56,.12)}
.cta2{font-size:12px;font-weight:400;gap:16px}
.buy-pill{background:transparent;color:var(--plum);border:1px solid rgba(53,38,62,.3);border-radius:3px;height:36px;padding:0 13px;font-size:12px;font-weight:500}
body[data-tp=dark] .buy-pill{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.header{gap:14px}
.catalog h2{font-size:clamp(48px,12vw,86px);line-height:1.05}
.catalog .lead{font-size:14px;line-height:1.6;margin-top:16px}
.item h3{font-size:34px;letter-spacing:-.025em}
.item .meta{font-size:12px;letter-spacing:.08em;margin-top:10px}
.item .price{font-size:20px;font-weight:400;letter-spacing:-.02em}
.item .row{gap:22px;margin-top:22px}
.perks{font-size:12px;line-height:1.7;max-width:58ch;margin-left:auto;margin-right:auto}
.foot-brand p,.cols a{font-size:13px;line-height:1.65}
.cols h4{font-size:10px;letter-spacing:.14em}.legal{font-size:10px}
.co-bag h2{font-family:var(--serif)!important;font-weight:400!important}
@media(min-aspect-ratio:1/1){
 .header{height:88px;padding:0 5.5vw;gap:26px}
 .logo{font-size:36px}.header nav{font-size:12px;font-weight:400;gap:30px}
 .buy-pill{height:38px;font-size:12px;padding:0 18px}
 .beat{left:5.5vw;top:30vh;max-width:34vw}
 .big{font-size:clamp(44px,5.1vw,100px);line-height:.98}
 .k{font-size:10px;margin-bottom:18px}
 .s{font-size:clamp(13px,1.05vw,18px);max-width:29ch;line-height:1.7}
 .hero{left:5.5vw;right:auto;top:30vh;bottom:auto;width:34vw;max-width:560px;align-items:flex-start;text-align:left;color:#fff8ee}
 .hero .k{order:0;margin:0 0 20px}
 .hero .giant{order:1;font-size:clamp(48px,5.6vw,112px);line-height:.95}
 .hero .s{order:2;font-size:13px;margin:22px 0 0;max-width:30ch}
 .hero .ctas{order:3;justify-content:flex-start;gap:25px;margin-top:30px}
 .hero .cta{background:#fff8ee;color:var(--plum);height:50px;font-size:12px;padding:0 22px}
 .hero .cta2{font-size:12px}
 .beat.top{top:13vh;max-width:39vw}
 .beat.right{right:5.5vw;bottom:12vh;max-width:36vw}
 .catalog h2{font-size:clamp(58px,6vw,110px)}
 .catalog .lead{font-size:15px}
 .velo-left{background:linear-gradient(90deg,rgba(32,20,41,.63),rgba(32,20,41,.32) 30%,transparent 52%)}
}
@media(min-aspect-ratio:1/1) and (max-height:600px){
 .hero{top:25vh}.hero .giant{font-size:clamp(40px,8.5vh,65px)}
 .hero .k{margin-bottom:10px}.hero .s{margin-top:12px}.hero .ctas{margin-top:16px}
 .beat .big{font-size:clamp(36px,8vh,56px)}
 .beat.top{top:96px}.beat.top .k{margin-bottom:10px}.beat.top .s{margin-top:12px}
}
@media(max-aspect-ratio:999/1000) and (max-height:740px){
 .hero{top:76px}.hero .giant{font-size:46px}.hero .k{font-size:9px;margin-bottom:6px}.hero .s{margin-top:8px;font-size:11px}
}

@media(max-aspect-ratio:999/1000) and (max-height:640px){
 .hero{top:70px}.hero .k{display:none}
 .hero .giant{font-size:clamp(34px,7.2svh,44px);line-height:.9}
 .hero .s{position:absolute;bottom:66px;margin:0;font-size:11px;text-shadow:0 0 10px #fff8ee}
}

@media(max-aspect-ratio:999/1000) and (min-width:600px){
 .hero{top:90px}.hero .giant{font-size:clamp(44px,7.2vw,68px)}
 .hero .giant br{display:none}.hero .giant br + .w{margin-left:.16em}
 .hero .s{margin-top:10px}
}