@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,200;0,300;0,400;1,200;1,300;1,400&family=Lato:wght@100;200;300;400&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:#faf8f5;--bg2:#f0ece6;--surface:#f5f1eb;
  --text:#0d0b09;--muted:#5e574f;--border:rgba(0,0,0,.12);
  --gold:#0d0b09;--gold2:#0d0b09;--white:#ffffff;--nav-h:84px;
}

html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'Lato','Helvetica Neue',sans-serif;font-weight:300;font-size:16px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);}

.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 48px;transition:background .4s,border .4s;}
.navbar.scrolled{background:rgba(250,248,245,.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);}
.navbar .logo{text-decoration:none;}
.navbar .logo img{height:72px;width:auto;display:block;opacity:.85;mix-blend-mode:normal;}
.nav-links{display:flex;gap:40px;align-items:center;}
.nav-links a{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:300;color:rgba(13,11,9,.5);text-decoration:none;transition:color .3s;}
.nav-links a:hover,.nav-links a.active{color:var(--text);}
.hamburger{display:none;flex-direction:column;gap:6px;cursor:pointer;background:none;border:none;padding:4px;}
.hamburger span{width:26px;height:1px;background:var(--text);display:block;transition:.3s;}
@media(max-width:760px){
  .hamburger{display:flex;}
  .navbar{padding:0 24px;}
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--border);flex-direction:column;gap:0;align-items:stretch;max-height:0;overflow:hidden;transition:max-height .35s;}
  .nav-links.open{max-height:400px;}
  .nav-links a{padding:16px 24px;border-bottom:1px solid var(--border);font-size:12px;letter-spacing:2px;}
}

.hero{height:100vh;position:relative;display:flex;align-items:flex-end;overflow:hidden;background:#000;}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.55;animation:heroScale 12s ease-in-out infinite alternate;}
@keyframes heroScale{from{transform:scale(1);}to{transform:scale(1.04);}}
.hero-content{position:relative;z-index:2;padding:0 64px 72px;animation:fadeUp 1.1s .2s both;}
@media(max-width:760px){.hero-content{padding:0 24px 56px;}}
.hero-eyebrow{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:20px;display:block;}
.hero-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(56px,8vw,110px);font-weight:200;line-height:1;letter-spacing:-2px;color:var(--white);margin-bottom:32px;}
.hero-title em{font-style:italic;color:var(--gold2);}
.hero-sub{font-size:13px;letter-spacing:1px;color:rgba(255,255,255,.55);font-weight:300;margin-bottom:40px;max-width:380px;line-height:1.9;}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;}
@keyframes fadeUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:none;}}
.hero-scroll{position:absolute;bottom:32px;right:64px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.35);cursor:pointer;text-decoration:none;transition:color .3s;}
.hero-scroll:hover{color:var(--gold);}
.hero-scroll::after{content:'';width:1px;height:52px;background:rgba(255,255,255,.2);display:block;animation:scrollLine 2s ease-in-out infinite;}
@keyframes scrollLine{0%,100%{opacity:.2;transform:scaleY(.5);transform-origin:top;}50%{opacity:.8;transform:scaleY(1);transform-origin:top;}}

.btn{display:inline-block;padding:14px 36px;font-size:10px;letter-spacing:3px;text-transform:uppercase;font-weight:300;text-decoration:none;cursor:pointer;border:none;font-family:inherit;transition:.3s;}
.btn-gold{background:var(--text);color:var(--white);}
.btn-gold:hover{background:#333;}
.btn-ghost{background:transparent;color:var(--text);border:1px solid rgba(0,0,0,.25);}
.btn-ghost:hover{border-color:var(--text);color:var(--text);}

.section{padding:110px 64px;}
.section-sm{padding:70px 64px;}
@media(max-width:760px){.section{padding:70px 24px;}.section-sm{padding:50px 24px;}}
.inner{max-width:1300px;margin:0 auto;}
.inner-narrow{max-width:800px;margin:0 auto;}
.sec-eyebrow{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;display:block;}
.sec-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(38px,5vw,66px);font-weight:200;line-height:1.05;letter-spacing:-1px;margin-bottom:24px;}
.sec-title em{font-style:italic;}
.sec-lead{font-size:15px;color:var(--muted);line-height:1.9;max-width:580px;}
.rule{width:48px;height:1px;background:var(--gold);margin:28px 0;}
.rule-c{margin:28px auto;}

.masonry{columns:3;column-gap:3px;max-width:100%;}
@media(max-width:1024px){.masonry{columns:2;}}
@media(max-width:580px){.masonry{columns:1;}}
.masonry-item{break-inside:avoid;margin-bottom:3px;position:relative;overflow:hidden;cursor:pointer;display:block;}
.masonry-item img{width:100%;display:block;transition:transform .7s cubic-bezier(.25,.46,.45,.94);}
.masonry-item:hover img{transform:scale(1.04);}
.masonry-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 50%);opacity:0;transition:opacity .4s;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;}
.masonry-item:hover .masonry-overlay{opacity:1;}
.masonry-overlay .ov-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-weight:300;font-style:italic;color:#fff;margin-bottom:4px;}
.masonry-overlay .ov-tag{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);}

/* Galería en mosaico (masonry) — imágenes SIEMPRE completas, sin recorte */
.grid-3{columns:3;column-gap:3px;max-width:100%;display:block;}
@media(max-width:900px){.grid-3{columns:2;}}
@media(max-width:540px){.grid-3{columns:1;}}
.grid-item{position:relative;overflow:hidden;cursor:pointer;background:#e8e3dc;break-inside:avoid;margin-bottom:3px;display:block;}
.grid-item img{width:100%;height:auto;display:block;object-fit:contain;transition:transform .7s cubic-bezier(.25,.46,.45,.94),opacity .4s;}
.grid-item:hover img{transform:scale(1.04);opacity:.82;}
/* El nombre y los detalles YA NO se muestran sobre la obra (solo al pinchar) */
.grid-caption{display:none!important;}

.split{display:grid;grid-template-columns:1fr 1fr;min-height:90vh;}
@media(max-width:900px){.split{grid-template-columns:1fr !important;min-height:auto;}}
.split-img{position:relative;overflow:hidden;min-height:500px;}
.split-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.split-body{padding:80px 72px;display:flex;flex-direction:column;justify-content:center;background:var(--surface);}
@media(max-width:760px){.split-body{padding:48px 24px;}}
.split-quote{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(22px,2.8vw,32px);font-weight:200;font-style:italic;color:var(--gold2);line-height:1.5;margin-bottom:36px;}
.split-text{font-size:14px;color:var(--muted);line-height:1.95;margin-bottom:20px;}

.page-hero{height:42vh;min-height:340px;position:relative;overflow:hidden;background:#000;display:flex;align-items:flex-end;}
.page-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.35;}
.page-hero-content{position:relative;z-index:2;padding:0 64px 56px;}
@media(max-width:760px){.page-hero-content{padding:0 24px 40px;}.page-hero{height:35vh;min-height:260px;}}
.page-hero-content .sec-eyebrow{margin-bottom:10px;}
.page-hero-content h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(44px,7vw,88px);font-weight:200;letter-spacing:-2px;line-height:1;color:var(--white);}
.page-hero-content h1 em{font-style:italic;color:var(--gold2);}

.mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);}
@media(max-width:900px){.mat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:540px){.mat-grid{grid-template-columns:1fr;}}
.mat-cell{background:var(--surface);padding:44px 40px;transition:background .3s;}
.mat-cell:hover{background:#ebe7e0;}
.mat-cell .mat-num{font-family:'Cormorant Garamond',Georgia,serif;font-size:48px;font-weight:200;color:var(--border);line-height:1;margin-bottom:20px;}
.mat-cell h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:300;color:var(--text);margin-bottom:14px;}
.mat-cell p{font-size:13px;color:var(--muted);line-height:1.9;}
.mat-cell .mat-label{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:block;}

.contact-wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:0;min-height:70vh;}
@media(max-width:900px){.contact-wrap{grid-template-columns:1fr;}}
.contact-left{background:var(--surface);padding:80px 56px;display:flex;flex-direction:column;justify-content:center;}
@media(max-width:760px){.contact-left{padding:48px 24px;}}
.contact-right{padding:80px 56px;background:var(--bg);}
@media(max-width:760px){.contact-right{padding:48px 24px;}}
.contact-detail{margin-bottom:16px;font-size:14px;}
.contact-detail a{color:var(--text);text-decoration:none;transition:color .3s;}
.contact-detail a:hover{color:var(--gold);}
.contact-detail .label{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;display:block;}
.form-group{margin-bottom:24px;}
.form-group label{display:block;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:14px 0;font-size:15px;font-family:inherit;font-weight:300;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--text);outline:none;transition:border .3s;-webkit-appearance:none;border-radius:0;}
.form-group input:focus,.form-group textarea:focus{border-bottom-color:var(--gold);}
.form-group textarea{resize:none;min-height:120px;}
.form-group select option{background:var(--bg2);}

footer{background:var(--bg2);border-top:1px solid var(--border);padding:72px 64px 40px;}
.footer-grid{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;padding-bottom:56px;border-bottom:1px solid var(--border);}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:36px;}footer{padding:56px 24px 32px;}}
.footer-brand .f-logo{height:56px;margin-bottom:20px;opacity:.7;display:block;}
.footer-brand p{font-size:13px;color:var(--muted);line-height:1.9;max-width:300px;}
.footer-col h4{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:20px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:10px;}
.footer-col li a{font-size:13px;color:var(--muted);text-decoration:none;transition:color .3s;}
.footer-col li a:hover{color:var(--text);}
.footer-col .fc-line{font-size:13px;color:var(--muted);margin-bottom:10px;}
.footer-col .fc-line a{color:var(--muted);text-decoration:none;transition:color .3s;}
.footer-col .fc-line a:hover{color:var(--gold);}
.footer-copy{max-width:1300px;margin:28px auto 0;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:rgba(0,0,0,.3);letter-spacing:.5px;}
@media(max-width:640px){.footer-copy{flex-direction:column;gap:6px;text-align:center;}}

.lb{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.97);display:none;align-items:center;justify-content:center;padding:24px;}
.lb.open{display:flex;}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain;}
.lb-x{position:fixed;top:24px;right:32px;color:rgba(255,255,255,.5);font-size:28px;cursor:pointer;background:none;border:none;transition:color .3s;line-height:1;}
.lb-x:hover{color:#fff;}
.lb-info{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-style:italic;color:rgba(255,255,255,.6);white-space:nowrap;}

.ta-c{text-align:center;}
.ta-c .sec-lead{margin:0 auto;}
.ta-c .rule{margin:28px auto;}

/* ── PAGE HEADER tipográfico (sin foto) ───────────────────────────────────── */
.page-header{
  padding: calc(var(--nav-h) + 80px) 64px 72px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  max-width: 100%;
}
@media(max-width:760px){
  .page-header{ padding: calc(var(--nav-h) + 52px) 24px 52px; }
}
.ph-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size: clamp(52px, 8vw, 100px);
  font-weight: 200; line-height: 1; letter-spacing: -2px;
  color: var(--text); margin-bottom: 0;
}
.ph-title em{ font-style: italic; color: var(--gold); }
.ph-rule{
  width: 56px; height: 1px; background: var(--gold);
  margin: 28px 0 24px;
}
.ph-sub{
  font-size: 15px; color: var(--muted); line-height: 1.9;
  max-width: 640px;
}

/* ── LIGHTBOX con panel de descripción ───────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.97);
  display:none; align-items:center; justify-content:center;
  gap: 48px; padding: 32px;
  flex-direction: row;
}
.lb.open{ display:flex; }
@media(max-width:900px){
  .lb{ flex-direction:column; gap:24px; overflow-y:auto; align-items:center; }
}
/* lightbox — imagen directa (modo simple) */
.lb > img{
  max-width:60vw; max-height:88vh;
  object-fit:contain; flex-shrink:0;
}
@media(max-width:900px){
  .lb > img{ max-width:92vw; max-height:55vh; }
}
/* lightbox — wrapper de 2 imágenes (modo doble) */
.lb-imgs{
  display:flex; flex-direction:column; gap:16px;
  max-height:88vh; overflow-y:auto;
  max-width:60vw; flex-shrink:0;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent;
}
.lb-imgs > img{
  max-width:100%; max-height:82vh; object-fit:contain; display:block;
}
@media(max-width:900px){
  .lb-imgs{ max-width:92vw; max-height:none; overflow-y:visible; }
  .lb-imgs > img{ max-height:50vh; }
}
.lb-x{
  position:fixed; top:20px; right:28px;
  color:rgba(255,255,255,.45); font-size:32px;
  cursor:pointer; background:none; border:none;
  transition:color .3s; line-height:1; z-index:9001;
}
.lb-x:hover{ color:#fff; }
.lb-panel{
  display:flex; flex-direction:column; justify-content:center;
  max-width: 320px; min-width: 220px;
  padding: 8px 0;
}
@media(max-width:900px){
  .lb-panel{ max-width: 92vw; align-items:center; text-align:center; }
}
.lb-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size: 22px; font-weight:300; font-style:italic;
  color: rgba(255,255,255,.9); line-height:1.3; margin-bottom:16px;
}
.lb-desc{
  font-size: 14px; color: rgba(255,255,255,.65);
  line-height: 1.85;
  border-left: 2px solid rgba(255,255,255,.35);
  padding-left: 16px;
  margin-bottom: 0;
}
@media(max-width:900px){
  .lb-desc{ border-left:none; border-top:1px solid var(--border); padding:16px 0 0; }
}

/* ── HERO VOKA ─────────────────────────────────────────────────────────────── */
.voka-hero{
  min-height:100vh;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.voka-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 50%, rgba(201,168,124,.06) 0%, transparent 70%);
  pointer-events:none;
}
.voka-hero-inner{
  text-align:center;padding:120px 32px 80px;
  animation:fadeUp 1s .1s both;
}
.voka-eyebrow{
  font-size:10px;letter-spacing:6px;text-transform:uppercase;
  color:var(--muted);margin-bottom:48px;display:block;
}
.voka-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(72px,12vw,160px);
  font-weight:200;line-height:.95;
  letter-spacing:-4px;color:var(--white);
  margin-bottom:48px;
}
.voka-title em{
  font-style:italic;color:var(--gold2);
  display:block;
}
.voka-line{
  width:1px;height:60px;background:var(--gold);
  margin:0 auto 48px;opacity:.6;
}
.voka-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ── GALERÍA VOKA ──────────────────────────────────────────────────────────── */
.voka-gallery{background:var(--bg);}
.voka-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto;
  gap:3px;
}
@media(max-width:760px){.voka-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.voka-grid{grid-template-columns:1fr;}}
.voka-cell{
  position:relative;overflow:hidden;cursor:pointer;
  aspect-ratio:4/3;background:#111;
}
.voka-cell.voka-tall{aspect-ratio:3/4;}
.voka-cell.voka-wide{grid-column:span 2;aspect-ratio:16/7;}
@media(max-width:760px){
  .voka-cell.voka-wide{grid-column:span 2;}
  .voka-cell.voka-tall{aspect-ratio:4/3;}
}
@media(max-width:480px){
  .voka-cell.voka-wide{grid-column:span 1;aspect-ratio:4/3;}
}
.voka-cell img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.25,.46,.45,.94),opacity .4s;
}
.voka-cell:hover img{transform:scale(1.06);opacity:.7;}
.voka-cap{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;padding:20px;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 50%);
  opacity:0;transition:opacity .35s;
}
.voka-cell:hover .voka-cap{opacity:1;}
.voka-cap span{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:18px;font-style:italic;font-weight:300;color:#fff;
}

/* ── VENDIDO ───────────────────────────────────────────────────────────────── */
.sold-badge{
  position:absolute;top:16px;right:16px;z-index:2;
  background:rgba(0,0,0,.75);
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.7);
  font-size:8px;letter-spacing:3px;text-transform:uppercase;
  padding:5px 10px;backdrop-filter:blur(4px);
  pointer-events:none;
}

/* ── TAMAÑO CUADRO: ya no se muestra sobre la obra, va dentro del lightbox ── */
.cuadro-size{display:none!important;}
.lb-size{
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:18px;
}

/* ── VOKA REAL: imagen full + frase centrada ─────────────────────────────── */
.voka-fullimg{
  width:100%;
  padding-top:var(--nav-h);
  background:var(--bg);
  line-height:0;
}
.voka-fullimg img{
  width:100%;
  max-height:90vh;
  object-fit:contain;
  object-position:center;
  display:block;
}
@media(min-width:1024px){
  .voka-fullimg{max-width:1320px;margin:0 auto;}
  .voka-fullimg img{max-height:87vh;}
}

.voka-quote-block{
  padding:72px 32px 80px;
  text-align:center;
  background:var(--bg);
}
.voka-quote-text{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(18px,2.4vw,28px);
  font-weight:200;
  font-style:italic;
  color:rgba(13,11,9,.75);
  line-height:1.7;
  max-width:760px;
  margin:0 auto 40px;
}
.voka-divider{
  width:48px;height:1px;
  background:var(--gold);
  margin:0 auto 36px;
}
.voka-links{
  display:flex;gap:20px;justify-content:center;
  align-items:center;flex-wrap:wrap;
}
.voka-links a{
  font-size:10px;letter-spacing:4px;
  text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  transition:color .3s;
}
.voka-links a:hover{color:var(--gold);}
.voka-links span{color:rgba(0,0,0,.2);}

/* ── RESPONSIVE: proceso (sobre-mi) ─────────────────────────────────────── */
.proceso-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;max-width:1100px;margin:0 auto;}
@media(max-width:900px){.proceso-grid{grid-template-columns:repeat(2,1fr);gap:36px;}}
@media(max-width:540px){.proceso-grid{grid-template-columns:1fr;gap:28px;}}

/* ── RESPONSIVE: quote block en móvil ───────────────────────────────────── */
@media(max-width:540px){.voka-quote-block{padding:52px 24px 60px;}}

/* ── TOUCH: captions siempre visibles en móvil (sin hover) ─────────────── */
@media(max-width:760px){
  .grid-caption{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 55%);}
  .cuadro-size{opacity:1;}
  .masonry-overlay{opacity:1;}
}

/* ── Ajustes responsive (móvil/tablet) ─────────────────────────────────── */
html,body{max-width:100%;overflow-x:hidden;}
img{max-width:100%;}
@media(max-width:900px){
  /* Foto de "Mi enfoque" (materiales) y bloques split en móvil */
  .split-img[role="img"]{min-height:auto !important;height:auto !important;aspect-ratio:1080/1431;background-size:cover !important;background-position:center !important;}
  .split-img{min-height:320px;}
}
@media(max-width:760px){
  .grid-3{column-gap:6px;}
  .grid-item{margin-bottom:6px;}
  .section{padding:56px 20px;}
  /* Lightbox cómodo en móvil */
  .lb{padding:16px;gap:16px;}
  .lb-imgs{max-width:100%;}
  .lb-imgs>img{max-height:56vh;}
  .lb-panel{max-width:100%;}
  .lb-title{font-size:20px;}
  .lb-desc{font-size:13px;}
  /* Tarjetas de material a una columna ya se hereda de mat-grid */
}
@media(max-width:540px){
  .page-header .ph-sub{font-size:14px;}
  .split-body{padding:40px 22px;}
  .lb-x{top:12px;right:16px;}
}