html,body{max-width:100%;margin:0!important;padding:0!important;overflow-x:hidden!important}html{scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;background:#416b88;overflow-x:clip!important}html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}body{background:#f1f0ea}[data-pencil-name="1. Precisión Cálida"]{max-width:100vw!important}body.intro-lock{height:100vh;overflow:hidden}[data-pencil-name="1. Precisión Cálida"]{width:100%!important;height:auto!important}[data-pencil-name=Overlay\ mineral]{right:0;width:100%!important;height:100%!important}[data-pencil-name="Hero — Construimos permanencia"]{z-index:5;min-height:758px;position:relative;height:calc(100vh - 2px)!important}[data-pencil-name=Proyecto\ destacado]{z-index:1;position:relative;overflow:hidden}[data-pencil-name=Navegación]{animation:.8s cubic-bezier(.2,.75,.25,1) both navEnter;width:calc(100% - 108px)!important}[data-pencil-name=Manifiesto\ destacado]{animation:.9s cubic-bezier(.2,.8,.2,1) .48s both manifestoPanelIn;right:54px;box-shadow:0 18px 45px #0003;left:auto!important}[data-pencil-name=Manifiesto\ hero]{left:auto!important;right:auto!important}[data-pencil-name="Ayuda card stack"],[data-pencil-name=Texto\ contacto]{right:54px;left:auto!important}[data-pencil-name=Pie\ legal]{width:calc(100% - 108px)!important}[data-pencil-name=Navegación],[data-pencil-name=Pie\ legal]{max-width:none!important}[data-pencil-name="Misión y visión"],[data-pencil-name="Secuencia de trabajo"]{width:100%!important;max-width:none!important}[data-pencil-name="Lista de valores"]{justify-content:flex-start!important;gap:0!important;width:50%!important}[data-pencil-name^=Valor\ ]{flex:1 1 0!important;justify-content:center!important;width:auto!important;padding-left:0!important;padding-right:0!important}[data-pencil-name^=Valor\ ]:not(:first-child){border-left:1px solid #c9c8c0!important}[data-pencil-name=Etiqueta\ hero]{animation:.7s .18s both labelEnter}[data-pencil-name=Titular\ hero]{clip-path:inset(0 100% 0 0);animation:1.05s cubic-bezier(.2,.8,.2,1) .28s forwards headlineReveal}[data-pencil-name=Manifiesto\ hero]{opacity:0;animation:.8s ease-out .72s forwards manifestEnter}[data-pencil-name="Hero — Construimos permanencia"]{background-size:cover;animation:1.8s cubic-bezier(.2,.7,.2,1) both heroFocus}[data-pencil-name=PROYECTOS],[data-pencil-name=MÉTODO],[data-pencil-name=NOSOTROS],[data-pencil-name=Botón\ conversar]{cursor:pointer}[data-pencil-name=PROYECTOS],[data-pencil-name=MÉTODO],[data-pencil-name=NOSOTROS]{transition:color .2s}[data-pencil-name=PROYECTOS]:hover,[data-pencil-name=MÉTODO]:hover,[data-pencil-name=NOSOTROS]:hover{color:#fff!important}[data-pencil-name=Botón\ conversar]{transition:background-color .2s}[data-pencil-name=Botón\ conversar]:hover{background:#fff!important}[data-pencil-name^=Panel\ selector]{cursor:pointer;will-change:left,width;transition:left .65s cubic-bezier(.22,.8,.2,1),width .65s cubic-bezier(.22,.8,.2,1),outline-color .3s,filter .3s}[data-pencil-name^=Panel\ selector]>div{transition:width .65s cubic-bezier(.22,.8,.2,1),left .65s cubic-bezier(.22,.8,.2,1),opacity .3s}[data-pencil-name^=Velo\ panel]{background-color:#0000!important;background-image:linear-gradient(#17181600 0%,#17181608 48%,#17181654 76%,#171816d9 100%)!important;background-repeat:no-repeat!important;background-size:100% 100%!important;height:430px!important;top:0!important}[data-pencil-name^=Panel\ selector]:focus-visible{outline-color:#f20562!important}[data-pencil-name^=Panel\ selector][aria-expanded=false]>:not([data-pencil-name^=Velo\ panel]):not([data-pencil-name^=Índice\ panel]){opacity:0;pointer-events:none}[data-pencil-name^=Panel\ selector][aria-expanded=true]>:not([data-pencil-name^=Velo\ panel]):not([data-pencil-name^=Índice\ panel]){opacity:1}.catalog-caption{z-index:3;color:#fff;white-space:nowrap;align-items:center;gap:14px;transition:opacity .3s;display:flex;position:absolute;bottom:30px;left:24px}.catalog-caption__mark{background:#f20562;flex:0 0 44px;place-items:center;width:44px;height:44px;font:700 11px/1 IBM Plex Mono,monospace;display:grid}.catalog-caption strong{font:800 18px/1.1 Funnel Sans,sans-serif;display:block}.catalog-caption small{color:#d0d0c8;margin-top:6px;font:400 11px/1.2 Funnel Sans,sans-serif;display:block}[data-motion]{will-change:transform,opacity}.project-photo{transition:transform 1.2s cubic-bezier(.2,.75,.25,1);transform:scale(1.07)}.project-photo.is-visible{transform:scale(1)}.project-copy{opacity:0;transition:opacity .75s,transform .9s cubic-bezier(.2,.75,.25,1);transform:translate(34px)}.project-copy.is-visible{opacity:1;transform:none}.about-title{clip-path:inset(0 100% 0 0);transition:clip-path .95s cubic-bezier(.2,.8,.2,1)}.about-title.is-visible{clip-path:inset(0)}.principles{opacity:1;transition:transform .85s cubic-bezier(.2,.8,.2,1);transform:translateY(24px)}.principles.is-visible{transform:none}.values-row{opacity:1;clip-path:none;transition:transform .9s cubic-bezier(.2,.8,.2,1) 80ms;transform:translate(24px)}.values-row.is-visible{transform:none}.method-header{opacity:1;transition:transform .85s cubic-bezier(.2,.8,.2,1);transform:translate(-34px)}.method-header.is-visible{transform:none}.method-sequence{opacity:1;clip-path:none;transition:transform .85s cubic-bezier(.2,.8,.2,1) .1s;transform:translateY(18px)}.method-sequence.is-visible{transform:none}.contact-title{opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .7s;transform:translate(-55px)}.contact-title.is-visible{opacity:1;transform:none}@keyframes manifestoPanelIn{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translate(-90px)}to{opacity:1;clip-path:inset(0);transform:translate(0)}}@keyframes navEnter{0%{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}@keyframes labelEnter{0%{opacity:0;letter-spacing:3px}to{opacity:1;letter-spacing:1.7px}}@keyframes headlineReveal{to{clip-path:inset(0)}}@keyframes manifestEnter{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes heroFocus{0%{background-position:50% 46%}to{background-position:50%}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}.project-photo,.project-copy,.about-title,.principles,.values-row,.method-header,.method-sequence,.contact-title{opacity:1!important;clip-path:none!important;transform:none!important}}:root{--obran-ink:#171816;--obran-paper:#f1f0ea;--obran-pink:#f20562}.mobile-menu-toggle,.catalog-mobile-controls{display:none}[data-pencil-name=Botón\ conversar]{color:inherit;text-decoration:none}[data-pencil-name=PROYECTOS]:focus-visible,[data-pencil-name=MÉTODO]:focus-visible,[data-pencil-name=NOSOTROS]:focus-visible,[data-pencil-name=Botón\ conversar]:focus-visible,.mobile-menu-toggle:focus-visible,.catalog-control:focus-visible,.catalog-dot:focus-visible{outline-offset:4px;outline:2px solid #fff}@media (width>=901px) and (width<=1199px){[data-pencil-name=Navegación],[data-pencil-name=Pie\ legal]{width:calc(100% - 64px)!important;left:32px!important}[data-pencil-name=Navegación]{gap:24px!important}[data-pencil-name="Logo Obran a lo largo letras blancas"]{width:205px!important;height:72px!important}[data-pencil-name=Enlaces]{gap:18px!important}[data-pencil-name=Botón\ conversar]{padding:11px 14px!important}[data-pencil-name=Etiqueta\ hero]{left:40px!important}[data-pencil-name=Titular\ hero]{width:min(72vw,900px)!important;font-size:clamp(76px,9vw,104px)!important;line-height:.94!important;left:32px!important}[data-pencil-name=Manifiesto\ destacado]{width:min(390px,38vw)!important;right:32px!important}[data-pencil-name="Fotografía Casa Ladera"]{width:55%!important}[data-pencil-name="Ficha Casa Ladera"]{padding:44px 34px!important}[data-pencil-name="Nombre Casa Ladera"]{width:100%!important;font-size:clamp(44px,4.7vw,56px)!important;line-height:.92!important}[data-pencil-name=Descripción\ proyecto]{width:100%!important}[data-pencil-name="Índice card stack"],[data-pencil-name="Título card stack"],[data-pencil-name=Pie\ selector]{left:32px!important}[data-pencil-name="Ayuda card stack"]{right:32px!important}[data-pencil-name="Nosotros — propósito y valores"]{min-height:500px;height:auto!important;padding:48px 32px 42px!important}[data-pencil-name=Declaración\ principal]{width:56%!important}[data-pencil-name="Descripción de empresa"]{width:38%!important}[data-pencil-name=Titular\ nosotros]{font-size:clamp(56px,6vw,70px)!important;line-height:.9!important}[data-pencil-name=Valores\ OBRAN]{flex-direction:column!important;align-items:flex-start!important;gap:16px!important}[data-pencil-name="Lista de valores"]{grid-template-columns:repeat(3,minmax(0,1fr));width:100%!important;display:grid!important}[data-pencil-name^=Valor\ ]{width:100%!important}[data-pencil-name="Método y contacto"]{min-height:460px;height:auto!important;padding:46px 32px 30px!important}[data-pencil-name=Título\ método]{width:58%!important}[data-pencil-name=Frase\ método]{width:100%!important;font-size:clamp(38px,4vw,45px)!important}[data-pencil-name=Introducción\ método]{width:36%!important}[data-pencil-name=Etiqueta\ contacto],[data-pencil-name=Titular\ contacto]{left:32px!important}[data-pencil-name=Titular\ contacto]{width:64%!important;font-size:clamp(64px,7vw,84px)!important;line-height:.9!important}[data-pencil-name=Texto\ contacto]{width:29%!important;right:32px!important}}@media (width<=900px){[data-pencil-name="1. Precisión Cálida"]{width:100%!important;height:auto!important;overflow:hidden!important}[data-pencil-name="Hero — Construimos permanencia"]{background-position:48%!important}[data-pencil-name=Navegación]{z-index:20!important;width:calc(100% - 56px)!important;top:24px!important;left:28px!important}[data-pencil-name="Logo Obran a lo largo letras blancas"]{width:196px!important;height:68px!important}.mobile-menu-toggle{color:#fff;cursor:pointer;letter-spacing:1px;background:#171816d1;border:1px solid #ffffff6b;align-items:center;gap:9px;padding:11px 13px;font:600 10px/1 IBM Plex Mono,monospace;display:inline-flex;position:absolute;top:6px;right:0}.mobile-menu-toggle__icon,.mobile-menu-toggle__icon:before,.mobile-menu-toggle__icon:after{background:currentColor;width:16px;height:1px;transition:transform .22s,opacity .22s;display:block}.mobile-menu-toggle__icon{position:relative}.mobile-menu-toggle__icon:before,.mobile-menu-toggle__icon:after{content:"";position:absolute;left:0}.mobile-menu-toggle__icon:before{top:-5px}.mobile-menu-toggle__icon:after{top:5px}[data-pencil-name=Navegación].is-menu-open .mobile-menu-toggle__icon{background:0 0}[data-pencil-name=Navegación].is-menu-open .mobile-menu-toggle__icon:before{top:0;transform:rotate(45deg)}[data-pencil-name=Navegación].is-menu-open .mobile-menu-toggle__icon:after{top:0;transform:rotate(-45deg)}[data-pencil-name=Enlaces]{opacity:0;pointer-events:none;visibility:hidden;z-index:1;background:#171816f5;padding:12px;transition:opacity .22s,transform .22s,visibility .22s;position:absolute;top:70px;left:0;transform:translateY(-10px);box-shadow:0 18px 45px #00000038;flex-direction:column!important;align-items:stretch!important;gap:0!important;width:100%!important}[data-pencil-name=Navegación].is-menu-open [data-pencil-name=Enlaces]{opacity:1;pointer-events:auto;visibility:visible;transform:none}[data-pencil-name=PROYECTOS],[data-pencil-name=MÉTODO],[data-pencil-name=NOSOTROS]{padding:14px 12px}[data-pencil-name=Botón\ conversar]{margin-top:8px;justify-content:space-between!important;width:100%!important}[data-pencil-name=Etiqueta\ hero]{top:156px!important;left:32px!important}[data-pencil-name=Titular\ hero]{width:calc(100% - 56px)!important;font-size:clamp(64px,10vw,82px)!important;line-height:.91!important;top:208px!important;left:28px!important}[data-pencil-name=Manifiesto\ destacado]{width:auto!important;height:auto!important;inset:auto 28px 70px!important}[data-pencil-name=Proyecto\ destacado]{height:auto!important}[data-pencil-name="Fotografía Casa Ladera"]{width:52%!important}[data-pencil-name="Ficha Casa Ladera"]{height:auto!important;padding:40px 30px!important}[data-pencil-name="Nombre Casa Ladera"]{width:100%!important;font-size:clamp(42px,6vw,54px)!important;line-height:.92!important}[data-pencil-name=Descripción\ proyecto]{width:100%!important;font-size:15px!important;line-height:21px!important}[data-pencil-name="Catálogo selector interactivo Obran"]{touch-action:pan-y;height:680px!important}[data-pencil-name="Índice card stack"],[data-pencil-name="Título card stack"],[data-pencil-name=Pie\ selector]{left:28px!important}[data-pencil-name="Ayuda card stack"]{display:none!important}[data-pencil-name^=Panel\ selector]{opacity:0;pointer-events:none;visibility:hidden;transform:translate(22px);filter:brightness()!important;width:calc(100% - 56px)!important;height:430px!important;transition:opacity .42s,transform .52s cubic-bezier(.22,.8,.2,1),outline-color .3s!important;left:28px!important}[data-pencil-name^=Panel\ selector][aria-expanded=true],[data-pencil-name="Panel selector 1 — Hotel Plaza Punta Bávaro"]:not([aria-expanded]){opacity:1;pointer-events:auto;visibility:visible;transform:none}[data-pencil-name^=Velo\ panel]{width:100%!important}[data-pencil-name^=Índice\ panel]{right:18px;left:auto!important}.catalog-mobile-controls{z-index:12;justify-content:space-between;align-items:center;display:flex;position:absolute;bottom:42px;left:28px;right:28px}.catalog-control{color:#fff;cursor:pointer;background:0 0;border:1px solid #ffffff80;justify-content:center;align-items:center;width:42px;height:38px;font:600 17px/1 IBM Plex Mono,monospace;display:inline-flex}.catalog-dots{align-items:center;gap:9px;display:flex}.catalog-dot{cursor:pointer;background:#777871;border:0;border-radius:50%;width:7px;height:7px;padding:0;transition:background-color .22s,transform .22s}.catalog-dot[aria-pressed=true]{background:var(--obran-pink);transform:scale(1.35)}[data-pencil-name=Pie\ selector]{transform:translate(-50%);top:620px!important;left:50%!important}[data-pencil-name="Nosotros — propósito y valores"]{height:auto!important;min-height:0!important;padding:50px 28px 44px!important}[data-pencil-name=Introducción\ OBRAN]{gap:34px!important}[data-pencil-name=Declaración\ principal]{width:52%!important}[data-pencil-name="Descripción de empresa"]{width:42%!important;padding-top:32px!important}[data-pencil-name=Titular\ nosotros]{font-size:clamp(54px,7vw,68px)!important;line-height:.9!important}[data-pencil-name="Misión y visión"],[data-pencil-name=Misión],[data-pencil-name=Visión]{height:auto!important}[data-pencil-name=Valores\ OBRAN]{flex-direction:column!important;align-items:flex-start!important;gap:18px!important}[data-pencil-name="Lista de valores"]{grid-template-columns:repeat(3,minmax(0,1fr));width:100%!important;display:grid!important}[data-pencil-name^=Valor\ ]{width:100%!important}[data-pencil-name="Método y contacto"]{min-height:460px;height:auto!important;padding:46px 28px 34px!important}[data-pencil-name=Título\ método]{width:58%!important}[data-pencil-name=Frase\ método]{width:100%!important;font-size:clamp(37px,5vw,44px)!important}[data-pencil-name=Introducción\ método]{width:37%!important}[data-pencil-name="Secuencia de trabajo"]{height:auto!important}[data-pencil-name="Cierre y contacto"]{height:460px!important}[data-pencil-name=Etiqueta\ contacto],[data-pencil-name=Titular\ contacto]{left:28px!important}[data-pencil-name=Titular\ contacto]{width:62%!important;font-size:clamp(60px,9vw,78px)!important;line-height:.9!important}[data-pencil-name=Texto\ contacto]{width:31%!important;right:28px!important}[data-pencil-name=Pie\ legal]{width:calc(100% - 56px)!important;left:28px!important}}@media (width<=767px){[data-pencil-name="Hero — Construimos permanencia"]{height:max(720px,100svh)!important;min-height:720px!important}[data-pencil-name=Navegación]{width:calc(100% - 40px)!important;top:18px!important;left:20px!important}[data-pencil-name="Logo Obran a lo largo letras blancas"]{width:176px!important;height:60px!important}[data-pencil-name=Etiqueta\ hero]{width:auto!important;font-size:10px!important;top:132px!important;left:20px!important}[data-pencil-name=Titular\ hero]{letter-spacing:-.8px!important;width:calc(100% - 40px)!important;font-size:clamp(38px,11vw,54px)!important;line-height:.92!important;top:178px!important;left:20px!important}[data-pencil-name=Manifiesto\ destacado]{padding:16px 17px!important;bottom:34px!important;left:20px!important;right:20px!important}[data-pencil-name=Manifiesto\ hero]{font-size:17px!important;line-height:23px!important}[data-pencil-name=Proyecto\ destacado]{flex-direction:column!important}[data-pencil-name="Fotografía Casa Ladera"]{width:100%!important;height:clamp(280px,72vw,420px)!important}[data-pencil-name="Identificador de proyecto"]{top:20px!important;left:20px!important}[data-pencil-name="Ficha Casa Ladera"]{width:100%!important;padding:38px 20px 46px!important}[data-pencil-name=Cabecera\ proyecto]{gap:21px!important}[data-pencil-name=Tipo\ proyecto]{white-space:normal!important;font-size:9px!important}[data-pencil-name="Nombre Casa Ladera"]{font-size:clamp(38px,12vw,50px)!important}[data-pencil-name=Descripción\ proyecto]{font-size:15px!important;line-height:22px!important}[data-pencil-name="Catálogo selector interactivo Obran"]{height:680px!important}[data-pencil-name="Índice card stack"],[data-pencil-name="Título card stack"]{left:20px!important}[data-pencil-name="Índice card stack"]{top:34px!important}[data-pencil-name="Título card stack"]{white-space:normal!important;width:calc(100% - 40px)!important;font-size:clamp(30px,9vw,40px)!important;line-height:.95!important;top:62px!important}[data-pencil-name^=Panel\ selector]{width:calc(100% - 40px)!important;height:400px!important;top:166px!important;left:20px!important}[data-pencil-name^=Velo\ panel]{height:400px!important}[data-pencil-name="Título panel activo"]{right:16px;white-space:normal!important;font-size:19px!important;line-height:22px!important;top:326px!important;left:80px!important}[data-pencil-name="Texto panel activo"]{right:16px;white-space:normal!important;font-size:11px!important;top:371px!important;left:80px!important}[data-pencil-name="Icono panel activo"]{top:328px!important;left:18px!important}.catalog-caption{white-space:normal;bottom:24px;left:18px;right:18px}.catalog-caption strong{font-size:16px}.catalog-caption small{white-space:normal}.catalog-mobile-controls{bottom:54px;left:20px;right:20px}[data-pencil-name=Pie\ selector]{top:648px!important;left:50%!important}[data-pencil-name="Nosotros — propósito y valores"]{gap:36px!important;padding:48px 20px 42px!important}[data-pencil-name=Introducción\ OBRAN]{flex-direction:column!important;gap:30px!important}[data-pencil-name=Declaración\ principal],[data-pencil-name="Descripción de empresa"]{width:100%!important;padding-top:0!important}[data-pencil-name=Titular\ nosotros]{letter-spacing:-.8px!important;font-size:clamp(44px,14vw,58px)!important}[data-pencil-name="Misión y visión"]{flex-direction:column!important;width:100%!important}[data-pencil-name=Misión],[data-pencil-name=Visión]{box-sizing:border-box!important;width:100%!important;margin:0!important;padding:26px 0!important}[data-pencil-name=Misión]{border-bottom-width:1px!important;border-right-width:0!important}[data-pencil-name="Lista de valores"]{grid-template-columns:repeat(2,minmax(0,1fr))}[data-pencil-name^=Valor\ ]{box-sizing:border-box!important;border-left:0!important;margin:0!important;padding:12px 4px!important}[data-pencil-name^=Valor\ ]:nth-child(2n){border-left:1px solid #c9c8c0!important;padding-left:12px!important}[data-pencil-name="Método y contacto"]{gap:36px!important;padding:46px 20px 38px!important}[data-pencil-name=Cabecera\ método]{flex-direction:column!important;align-items:flex-start!important;gap:24px!important}[data-pencil-name=Título\ método],[data-pencil-name=Introducción\ método]{width:100%!important}[data-pencil-name=Frase\ método]{font-size:clamp(34px,10vw,42px)!important;line-height:.98!important}[data-pencil-name="Secuencia de trabajo"]{flex-direction:column!important;width:100%!important}[data-pencil-name="Secuencia de trabajo"]>[data-pencil-name=DEFINIR],[data-pencil-name="Secuencia de trabajo"]>[data-pencil-name=CONSTRUIR],[data-pencil-name="Secuencia de trabajo"]>[data-pencil-name=RESOLVER]{box-sizing:border-box!important;width:100%!important;padding:20px 0!important}[data-pencil-name="Secuencia de trabajo"]>[data-pencil-name=RESOLVER],[data-pencil-name="Secuencia de trabajo"]>[data-pencil-name=CONSTRUIR]{border-top:1px solid #b8b9b3}[data-pencil-name="Cierre y contacto"]{height:560px!important}[data-pencil-name=Etiqueta\ contacto]{top:42px!important;left:20px!important}[data-pencil-name=Titular\ contacto]{letter-spacing:-1px!important;width:calc(100% - 40px)!important;font-size:clamp(40px,11vw,48px)!important;line-height:.95!important;top:100px!important;left:20px!important}[data-pencil-name=Texto\ contacto]{width:calc(100% - 40px)!important;top:250px!important;left:20px!important;right:auto!important}[data-pencil-name=Pie\ legal]{flex-direction:column!important;align-items:flex-start!important;gap:10px!important;width:calc(100% - 40px)!important;height:auto!important;top:auto!important;bottom:28px!important;left:20px!important}[data-pencil-name=Razón\ social],[data-pencil-name="Redes y año"]{white-space:normal!important;line-height:15px!important}.project-copy{transform:translate(18px)}.principles,.method-sequence{transform:translateY(12px)}.values-row{transform:translate(12px)}.method-header,.contact-title{transform:translate(-18px)}}@media (width<=479px){[data-pencil-name="Logo Obran a lo largo letras blancas"]{width:154px!important}.mobile-menu-toggle{padding:10px 11px}[data-pencil-name=Manifiesto\ destacado]{bottom:28px!important}[data-pencil-name="Lista de valores"]{grid-template-columns:1fr}[data-pencil-name^=Valor\ ]:nth-child(2n){border-left:0!important;padding-left:4px!important}}@media (prefers-reduced-motion:reduce){[data-pencil-name^=Panel\ selector],.catalog-dot,[data-pencil-name=Enlaces],.mobile-menu-toggle__icon,.mobile-menu-toggle__icon:before,.mobile-menu-toggle__icon:after{transition:none!important}}*,:before,:after{box-sizing:border-box}body{margin:0}