:root{--tab:4.125rem}
.tabbar,.hoja,.hoja-velo{display:none}

.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:40; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:end;
  padding:0 0.375rem env(safe-area-inset-bottom); min-height:calc(var(--tab) + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(17,26,36,.86),rgba(8,13,19,.95));
  -webkit-backdrop-filter:blur(1.125rem) saturate(1.5); backdrop-filter:blur(1.125rem) saturate(1.5);
  border-top:1px solid rgba(125,212,240,.22);
  box-shadow:0 -1rem 2.25rem -0.75rem rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06)}
html[data-tema=claro] .tabbar{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(238,245,250,.96));
  border-top-color:rgba(0,100,127,.18); box-shadow:0 -0.875rem 1.875rem -0.875rem rgba(20,60,90,.3),inset 0 1px 0 #fff}

.tab{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:0.1875rem; min-height:3.625rem; padding:0 0 0.5rem;
  background:none; border:0; color:var(--tenue); text-decoration:none; font:600 .68rem/1.1 var(--texto); cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.tab .ico{position:relative; width:2.875rem; height:1.875rem; display:grid; place-items:center; border-radius:0.9375rem; transition:background .18s,box-shadow .18s,color .18s}
.tab svg{width:1.4375rem; height:1.4375rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tab[aria-current=page],.tab[aria-expanded=true]{color:var(--tinta)}
.tab[aria-current=page] .ico,.tab[aria-expanded=true] .ico{color:var(--cian2);
  background:linear-gradient(180deg,rgba(0,180,224,.3),rgba(0,180,224,.12));
  box-shadow:0 0 0 1px rgba(0,180,224,.38),0 0.5rem 1.25rem -0.375rem rgba(0,180,224,.55)}
.tab:active .ico{transform:scale(.94)}
.tab .punto{position:absolute; top:0.1875rem; right:0.5625rem; margin:0; width:0.5rem; height:0.5rem; box-shadow:0 0 0 2px rgba(11,16,23,.9)}

.tab--centro{color:var(--tinta)}
.tab--centro .ico{width:3.5rem; height:3.5rem; margin-top:-1.375rem; border-radius:50%; color:#04210F;
  background:var(--v-verde,linear-gradient(180deg,#2DE57F,#17B35A));
  box-shadow:0 0 0 0.3125rem rgba(8,13,19,.92),0 0.875rem 1.75rem -0.375rem rgba(37,211,102,.6),inset 0 1px 0 rgba(255,255,255,.4)}
html[data-tema=claro] .tab--centro .ico{box-shadow:0 0 0 0.3125rem rgba(238,245,250,.96),0 0.875rem 1.75rem -0.375rem rgba(15,122,65,.5),inset 0 1px 0 rgba(255,255,255,.4); color:#fff}
.tab--centro svg{width:1.6875rem; height:1.6875rem; fill:currentColor; stroke:none}

.hoja-velo{position:fixed; inset:0; z-index:34; background:rgba(4,8,12,.6); -webkit-backdrop-filter:blur(0.1875rem); backdrop-filter:blur(0.1875rem);
  opacity:0; pointer-events:none; transition:opacity .22s}
.hoja-velo.visible{opacity:1; pointer-events:auto}
html[data-tema=claro] .hoja-velo{background:rgba(20,40,60,.35)}
.hoja{position:fixed; left:0; right:0; bottom:calc(var(--tab) + env(safe-area-inset-bottom)); z-index:36; max-height:74dvh; overflow-y:auto;
  padding:0.625rem 1rem 1.125rem; border-radius:1.375rem 1.375rem 0 0; border-bottom:0!important;
  transform:translateY(110%); visibility:hidden; transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s .26s}
.hoja.abierta{transform:none; visibility:visible; transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.hoja-asa{width:2.625rem; height:0.25rem; border-radius:2px; background:var(--linea2); margin:0 auto 0.75rem}
.hoja .pie-contacto{display:grid; gap:0.5rem}
.hoja .pie-dato{min-height:3.5rem; padding:0.5625rem 0.75rem; border-radius:0.75rem}
.hoja .pie-dato b{font-size:.9rem}
.hoja .pie-dato small{font-size:.8rem}
.hoja .pie-tit{font:600 .84rem var(--texto); color:var(--tinta); margin:1rem 0 2px}
.hoja .pie-cuentan a{display:flex; align-items:center; justify-content:space-between; gap:0.625rem; color:var(--suave); text-decoration:none;
  font-size:.84rem; line-height:1.4; padding:0.8125rem 0; border-bottom:1px solid var(--linea)}
.hoja .pie-cuentan a:last-child{border-bottom:0}
.hoja .pie-cuentan a::after{content:'›'; color:var(--tenue); font-size:1.15rem; line-height:1}
.hoja .producto{display:block; padding:0.75rem 0.8125rem; border-radius:0.75rem; text-decoration:none; color:var(--suave); font-size:.82rem; line-height:1.45}
.hoja .producto + .producto{margin-top:0.5rem}
.hoja .pr-dolor{display:block; color:var(--tinta); font-weight:600}
.hoja .producto b{color:var(--tinta); font-weight:600}
.hoja .pr-accion{display:block; margin-top:0.375rem; color:var(--cian2); font-weight:600}
.hoja .legal{display:flex; flex-wrap:wrap; gap:0.3125rem 0.9375rem; margin-top:1rem; padding-top:0.6875rem; border-top:1px solid var(--linea); font-size:.78rem; color:var(--tenue)}
.hoja .legal a{color:var(--tenue); text-decoration:none; padding:0.3125rem 0}
.hoja .pie-acciones{display:flex; align-items:center; gap:0.625rem; flex-wrap:wrap; margin-top:0.625rem}
.hoja .redes{display:flex; gap:0.5rem}
.hoja .red{width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:0.6875rem; color:var(--tenue)}
.hoja .libro{display:inline-flex; align-items:center; gap:0.4375rem; border-radius:0.625rem; padding:0.5625rem 0.8125rem; text-decoration:none; color:var(--suave); font-size:.82rem; min-height:2.75rem}
.hoja .libro span{width:0.875rem; height:1.125rem; border:1.5px solid var(--cian2); border-radius:2px; display:inline-block; position:relative; flex:0 0 auto}
.hoja .libro span::after{content:''; position:absolute; left:0.1875rem; right:0.1875rem; top:0.25rem; height:1.5px; background:var(--cian2); box-shadow:0 0.25rem 0 var(--cian2),0 0.5rem 0 var(--cian2)}

html.app .tabbar{display:grid}
html.app .hoja,html.app .hoja-velo{display:block}
html.app .pie{display:none!important}
html.app body{padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}

.tel .tabbar{display:grid; position:absolute}
.tel .hoja,.tel .hoja-velo{display:block; position:absolute}
.tel{padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}
body:has(.tel){padding-bottom:0}

.tab .punto{display:block; border-radius:50%; background:var(--tenue)}
.tab .punto--on{background:var(--wa)}

.hoja .pie-dato{display:flex; align-items:center; gap:0.75rem; text-decoration:none; color:inherit}
.hoja .pie-dato b{display:block; color:var(--tinta); font:600 .9rem/1.25 var(--texto)}
.hoja .pie-dato small{display:block; color:var(--suave); font-size:.8rem; line-height:1.3}
.hoja .pie-ico{flex:0 0 2.375rem; height:2.375rem; border-radius:0.6875rem; display:grid; place-items:center; background:var(--halo2); color:var(--cian2)}
.hoja .pie-ico svg{width:1.1875rem; height:1.1875rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.hoja .red svg{width:1.25rem; height:1.25rem}

.hoja .legal{align-items:center; gap:0 1rem}
.hoja .legal span{padding:0.3125rem 0}