@import url('https://fonts.googleapis.com/css2?family=Anek Gujarati:wght@400;700&display=swap');
html { font-family: 'Anek Gujarati', sans-serif; color: #333; font-size: 16px; }
body { padding-top: 8.5rem; line-height: 1.35; }
form { position: relative; z-index: 0; max-width: 420px; width: 100%; margin: auto; }

/* Others */
.radius { border-radius: 50%; }
.radius-1 { border-radius: 1rem; }
.radius-2 { border-radius: 2rem; }
.tt-up { text-transform: uppercase; }
.ls-1 { letter-spacing: .1em; }
.ls-2 { letter-spacing: .2em; }
.lh-1 { line-height: 1; }
hr { background-color: #bababa; }
::placeholder { opacity: 0.5; }
.empty { display: none; }
.link { text-decoration: underline; }
.link:hover { cursor: pointer; text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; }
space { height: 1rem; display: block; width: 100%; }
.ov-hidden {overflow: hidden;}

/* Botones */
.btn { font-weight: bold; text-decoration: none; border-radius: .5rem; line-height: 2.5rem; font-size: 1.05rem; padding: 0 .75rem; display: inline-flex; align-items: center; justify-content: center; transition: .3s ease all; user-select: none; -webkit-user-select: none; gap: .5rem; }
.btn:focus {outline: none}
.btn.lg { line-height: 3rem; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .1rem; }
.btn.bg-green { color: #fff }
.btn.bg-red { color: #fff }
.btn.bg-gray { color: #fff }
.btn.bg-gray-light { color: #8f9ca8; }
.btn.bg-light { color: #646464; box-shadow: 0 0 0 1px #cccfdb; }
.btn:hover { cursor: pointer; text-decoration: none }
.btn.bg-green:hover,.btn.bg-green:focus { box-shadow: 0 0 0 0.5rem rgb(32 204 131 / 20%) }
.btn.bg-red:hover { box-shadow: 0 0 0 0.5rem rgb(239 54 98 / 20%) }
.btn.bg-gray:hover { box-shadow: 0 0 0 0.5rem rgb(32 204 131 / 20%) }
.bg-gray-light:hover { box-shadow: 0 0 0 0.5rem rgb(239 242 244/ 20%) }
.btn.bg-orange { color: #fff }
.btn.bg-orange:hover,.btn.bg-orange:focus { box-shadow: 0 0 0 0.5rem rgb(255 102 51 / 20%); color: #fff }
.btn.bg-light:hover { }

/* Colors */
.c-white { color: #fff }
.c-red { color: #ef3662 }
.c-green { color: #20cc83 }
.c-blue { color: #394556 }
.c-gray { color: #8f9ca8; }
.bg-green { background-color: #18c95f; }
.bg-red { background-color: rgb(239 54 98) }
.bg-gray { background-color: rgb(143 156 168) }
.bg-gray-light { background-color: rgb(239 242 244) }
.bg-orange { background-color: rgb(255 102 51) }
.c-orange { color: rgb(255 102 51); }

/* Icons */
.icon { background-image: url(../img/icons.svg); background-size: 1100% auto; aspect-ratio: 1/1; display: inline-block; height: 1rem; }
.icon-specs-1 { background-position: 0 top; }
.icon-specs-2 { background-position: 10% top; }
.icon-specs-3 { background-position: 20% top; }
.icon-specs-4 { background-position: 30% top; }
.icon-specs-5 { background-position: 40% top; }
.icon-specs-6 { background-position: 50% top; }
.icon-specs-7 { background-position: 60% top; }
.icon-specs-8 { background-position: 70% top; }
.icon-specs-9 { background-position: 80% top; }
.icon-phone { background-position: 0 bottom; }
.icon-whatsapp { background-position: 10% bottom; }
.icon-send { background-position: 20% bottom; }
.icon-check, .icon-ok { background-position: 30% bottom; }
.icon-close { background-position: 40% bottom; }
.icon-left { background-position: 50% bottom; }
.icon-right { background-position: 60% bottom; }
.icon-list { background-position: 70% bottom; }

/* Filters */
.f-white { filter: invert(1); }
.f-gray { filter: invert(54%) sepia(14%) saturate(505%) hue-rotate(170deg) brightness(88%) contrast(90%); }
.f-orange { filter: invert(59%) sepia(77%) saturate(3856%) hue-rotate(339deg) brightness(101%) contrast(101%); }
.f-green { filter: invert(80%) sepia(28%) saturate(4280%) hue-rotate(85deg) brightness(86%) contrast(85%); }

/**/
.input-box { border-radius: .5rem; overflow: hidden; padding: .5rem; background-color: #fff; max-width: 600px; margin: auto; position: relative; }
.input-box input, .input-box label { border: 0; line-height: 3rem; padding: 0 .5rem; width: 75%; position: relative; z-index: 1; background-color: transparent; }
.input-box .btn { width: 25%; padding: 0; }
.input-box label { position: absolute; top: .5rem; left: .5rem; text-align: left; z-index: 0; }

/* Header Nav footer */
header { margin: 0; position: relative; position: fixed; top: 0; left: 0; right: 0; background-color: #fff; z-index: 1; box-shadow: 0 0 1rem 1rem rgb(98 103 116 / 10%); text-align: right; }
header > div { display: flex; align-items: center; }
header .header-1 { background-color: #303030; color: #e4e4e4; font-size: .85rem; height: 2.5rem; }
header .header-1 .icon { height: 1.5rem; }
header .header-1 a { gap: .25rem; }
header .header-1 a:hover { color: #fff }
header .header-2 { background-color: #ffffff; height: 6rem; }
header .container { position: relative; }
header .logo { height: 2.75rem; }
header .left { position: absolute; left: .75rem; top: 0; bottom: 0; margin: auto; line-height: 1; display: flex; align-items: center; }

/**/
header ul { list-style: none; margin: 0; display: inline-flex; align-items: center; gap: 1.5rem; }
header li { display: inline-block; }
header li a { text-decoration: none; line-height: 2rem; display: inline-flex; color: inherit; align-items: center; gap: .5rem; }
header .header-2 li a:hover { color: #ff6633; }

/**/
footer { padding: 2rem 0; font-size: .9rem; color: #899498; }
footer .links { text-align: right; }
footer .links a { text-decoration: none; color: inherit; margin-left: .5rem; }
footer .links a:hover { text-decoration: underline; }

/* Popups */
.popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.popup .box { border-radius: 1rem; background-color: #fff; position: relative; padding: 1.5rem; }
.popup .a { padding-right: 1.5rem; padding-left: 1.5rem; margin-bottom: 1.5rem; text-align: center; }
.popup .a h5 { }
.popup .a .btn-close { position: absolute; top: 1rem; right: 1rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; }
.popup .a .btn-close i { }
.popup .b { max-height: 440px; overflow: overlay; color: #899498; }
.popup .a .btn-close:hover { cursor: pointer; }
.filter { z-index: 8; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(242, 242, 242, 0.9); }
.filter, .popup { display: none; visibility: hidden; opacity: 0; }
.filter.visible, .popup.visible { display: flex; visibility: visible; opacity: 1; }

/* Pages */
.page { display: none; }
.page.visible { display: block; }

/* Sections */
section { padding-top: 5rem; padding-bottom: 5rem; }
.sect-01 { padding-top: 8rem; padding-bottom: 8rem; background-color: #f8f9fd; overflow: hidden; position: relative; z-index: 0; }
.bg { position: absolute; z-index: 0; top: 0; left: 0; bottom: 0; height: 100%; width: 100%; object-fit: cover; }
.sect-01 .container { position: relative; z-index: 1; }
.sect-01 .logo { height: 10rem; }
.sect-02 { }
.sect-02 ul { display: flex; flex-direction: row; gap: 1.5rem; }
.sect-02 ul li { width: 25%; justify-content: center; display: flex; flex-direction: column; border-radius: .75rem; overflow: hidden; }
.sect-02 ul li figure { aspect-ratio: 3/5; margin: 0; overflow: hidden; }
.sect-02 ul li:last-child { width: 50%; border: 1px solid #e4e7ea; padding: 2rem; }
.sect-02 ul li img { width: 100%; height: 100%; object-fit: cover; border-radius: .75rem; }
.sect-03 { background-color: #ff6633; color: #fff; padding-top: 2rem; padding-bottom: 2rem; }
.sect-03 ul { display: flex; flex-wrap: wrap; font-size: 1.1rem; }
.sect-03 ul li { width: 33.33%; display: flex; align-items: center; gap: 1rem; padding: 1rem; }
.sect-03 ul li .icon { height: 3.5rem; }
.sect-03 ul li span { }
.sect-04 ul { display: flex; flex-direction: row; gap: 1rem; }
.sect-04 ul li { width: 33.33%; display: flex; flex-direction: column; gap: 1rem; }
.sect-04 ul li:first-child { justify-content: center; }
.sect-04 ul li div { padding-left: 1.5rem; position: relative; }
.sect-04 ul li .icon { position: absolute; left: 0; top: .25rem; margin: auto; }
.sect-05 { padding-top: 0;overflow: hidden; }
.sect-05 .item { padding: 1rem; text-align: left; }
.sect-05 figure { width: 100%; margin: 0 0 1rem 0; aspect-ratio: 5/ 3; }
.sect-05 figure img { width: 100%; height: 100%; object-fit: cover; border-radius: .5rem; }
.sect-05 figure + div { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.sect-05 .icon { height: 2.5rem; }
.sect-05 .slick-slider { position: relative; }
.sect-05 .slick-arrow { position: absolute; bottom: 0; top: 0; margin: auto; height: 2rem; width: 2rem; border: 0; font-size: 0; background-color: #ccc; border-radius: 50%; align-items: center; justify-content: center; opacity: 0.7; }
.sect-05 .slick-arrow:hover { opacity: 1; cursor: pointer; }
.sect-05 .slick-arrow.left { transform: translateX(-2rem); left: 0; }
.sect-05 .slick-arrow.right { transform: translateX(2rem); right: 0; }
.sect-05 .slick-arrow .icon { height: 1.25rem; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
.sect-06 { background-color: #f6f7fc; }
.sect-06 .left { display: flex; flex-direction: column; justify-content: center; padding-bottom: 2rem; }
.sect-07 { background-color: #65696c; color: #fff; position: relative; }
.sect-07 .container { position: relative; }
.sect-07 a { color: #fff; text-decoration: none }
.sect-08 { text-align: center; background-color: #f6f7fc; }
.form-pedido { position: relative; max-width: unset; }
.form-pedido .layers {position: relative;max-width: 700px;height: 500px;margin: 0 auto 1.5rem;width: 100%;overflow: overlay;}
.form-pedido .layer { position: absolute; width: 700px; height: 500px; }
.form-pedido .layer-1 { z-index: 1; }
.form-pedido .layer-2 { z-index: 2; }
.form-pedido .layer-3 { z-index: 3; }
.form-pedido .extras { position: static; height: auto; display: flex; flex-direction: column; }
.form-pedido .extras .bx-input { position: static; flex-direction: row; max-width: 400px; width: 100%; text-align: left; align-items: center; margin-bottom: 1.5rem; }
.form-pedido .extras .bx-input .label { display: flex; flex-direction: row; gap: .5rem; align-items: center; }
.form-pedido .extras .bx-input select { max-width: 10rem; }
.form-pedido .layer img { width: auto; height: 400px; position: absolute; left: 110px; margin: 50px auto 0; display: none; }
.form-pedido .layer img.visible { display: block; }
.form-pedido .bx-input { display: none; flex-direction: column; line-height: 1; gap: .5rem; width: 120px; position: absolute; margin: auto; }
.form-pedido .bx-input.visible { display: flex; }
.form-pedido .bx-input .label { font-weight: bold; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; width: 100%; }
.form-pedido .bx-input .label .ico { height: 1.25rem; aspect-ratio: 1/1; }
.form-pedido .bx-input .input { line-height: 2rem; height: 2rem; border-radius: .5rem; box-shadow: 0 0 0 1px #cccfdb inset; border: none; padding: 0; text-align: center; -webkit-appearance: none; width: 100%; }
.form-pedido .bx-input select.input { background-image: url(../img/form-select.png); background-position: right center; background-size: contain; background-repeat: no-repeat; }
.form-pedido .bx-input.disabled .input { background-color: #f4f4f4; box-shadow: 0 0 0 1px #f4f4f4 inset; }
.form-pedido .bx-input.disabled .input:hover { box-shadow: none; }
.form-pedido .bx-input .input:focus, .form-pedido .bx-input .input:hover { outline: none; border: none; box-shadow: 0 0 0 1px #0099ff inset; }
.form-pedido .bx-input small { }
.form-pedido .bx-input-1 { left: 150px; top: 0; }
.form-pedido .bx-input-2 { top: 0; left: 290px; }
.form-pedido .bx-input-3 { left: 430px; top: 0; }
.form-pedido .bx-input-4 { bottom: 0; left: 290px; }
.form-pedido .bx-input-5 { left: 110px; top: 180px; }
.form-pedido .bx-input-6 { left: 470px; top: 180px; }
.form-pedido .bx-input-7 { top: 90px; left: 0; }
.form-pedido .bx-input-8 { top: 220px; left: 0; }
.form-pedido .bx-input-9 { left: 580px; top: 220px; }
.form-pedido .bx-input-10 { left: 290px; top: 222px; }
.form-pedido .bx-input-11 { left: 290px; top: 318px; }
.form-pedido .box {background-color: #fff;padding: 2rem 0;border-radius: .5rem;max-width: 800px;margin: auto;}
.form-pedido .form-1 {}
.form-pedido .form-2 { max-width: 440px; margin: auto; }
.form-pedido .bottom-buttons { display: flex; gap: .75rem; justify-content: center; padding: .5rem; }

/* Forms */

/**/
.input-container { width: 100%; background-color: #ffffff; position: relative; border-radius: .5rem; border; box-shadow: 0 0 0 1px #cccfdb; overflow: hidden; text-align: left; border: 0; }
.input-container input, .input-container textarea { color: #000000; border: 0; width: 100%; padding: 1rem .75rem 0 .75rem; font-size: 1rem; font-weight: bold; line-height: 3rem; display: block; background-color: transparent; border-radius: .5rem; }
.input-container label { position: absolute; top: 0; left: .75rem; font-size: .9rem; line-height: 2rem; color: #899498; }
.input-container textarea { line-height: 1.25; height: auto; padding-top: 2rem; }
.input-container textarea:focus { outline: none !important; }
.select-container { border: 0; border-radius: 0; padding: 1rem .75rem 0 .75rem; display: flex; align-items: center; justify-content: start; }
.select-container .separator { width: 1rem; text-align: center; }
.select-container select { padding: 0; margin: 0; border-radius: 0; border: 0; background-color: transparent; font-weight: bold; color: #000; height: 3rem; line-height: 3rem; }
.input-container.wrong { margin-bottom: 1.5rem; overflow: visible; box-shadow: 0 0 0 1px #f44336; }
.checkbox-container.wrong { margin-bottom: 2rem; overflow: visible; }
.input-container.wrong .msg-wrong, .checkbox-container.wrong .msg-wrong { color: #F44336; display: block; line-height: 1; position: absolute; bottom: -1.5rem; font-size: .8rem; text-align: center; width: 100%; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.input-container.ok .icon { height: 1rem; position: absolute; right: .75rem; top: 0; bottom: 0; margin: auto; }
.input-container:not(.ok) .icon-ok { display: none; }
.input-container:not(.wrong) .msg-wrong { display: none; }
.checkbox-container:not(.wrong) .msg-wrong { display: none; }

/**/
.input-container.checkbox-container { display: flex; justify-content: start; align-items: center; flex-wrap: wrap; background-color: transparent; box-shadow: none; }
input.checkbox, input.checkbox:active { position: absolute; height: 0; width: 0; opacity: 0; border: none; outline: none; }
label.checkbox { display: block; position: absolute; padding: 0; font-size: .8rem; line-height: 1.5rem; width: 1.5rem; height: 1.5rem; -webkit-border-radius: 50%; background-color: #fff; cursor: pointer; margin: 0; left: 0; top: 0; bottom: 0; margin: auto; }
label.checkbox:before { content: ''; display: block; position: absolute; z-index: 1; line-height: 1.25rem; height: 100%; width: 100%; -webkit-border-radius: 50%; top: 0; left: 0; background-color: transparent; -webkit-transition: 0.3s ease all; transition: 0.3s ease all; background-size: 1rem; background-repeat: no-repeat; background-position: center; box-shadow: 0 0 0 1px #cccfdb inset; }
input.checkbox:checked + label.checkbox:before { background-color: #03A9F4; background-image: url(../img/icon-checked.svg); background-size: contain; box-shadow: 0 0 0 1px #03A9F4 inset; }
label.checkbox + small { font-size: .85rem; width: 100%; padding-left: 2rem; min-height: 1.5rem; color: #899498; }
label.checkbox + span a { color: inherit; }
.input-container.wrong label.checkbox:before { box-shadow: 0 0 0 1px #F44336 inset; }
.input-container.wrong .msg-wrong { color: #F44336; opacity: 1; width: 100%; }

/**/
@media (max-width:768px) {
  body { padding-top: 7rem; }
  section { padding-top: 3rem; padding-bottom: 3rem; }
  header { }
  header .logo { height: 2.25rem }
  header .header-1 .left { display: none }
  header .header-1 ul { width: 100%; justify-content: space-between; }
  header .header-2 { height: 5rem; }
  header .header-2 ul li:not(:last-child) { display: none; }
  footer { text-align: center; }
  footer .links { text-align: center; }
  footer .links { margin-top: .25rem; }
  .sect-01 { padding-top: 5rem; padding-bottom: 5rem; z-index: 0; }
  .sect-01 .logo { max-height: 8rem; }
  .sect-02 ul { flex-direction: column-reverse; }
  .sect-02 ul li { width: 100%; }
  .sect-02 ul li:last-child { width: 100%; }
  .sect-02 ul li figure { aspect-ratio: 5 / 3; }
  .sect-03 ul { justify-content: center; }
  .sect-03 ul li { width: 80%; padding: .5rem 1rem; }
  .sect-04 { padding-left: 1rem; padding-right: 1rem; }
  .sect-04 ul { flex-direction: column; }
  .sect-04 ul li { width: 100%; }
  .sect-05 .slick-arrow { display: none !important; }
  .sect-06 { padding-left: 1rem; padding-right: 1rem; }
  .popup.visible { display: block!important; overflow: scroll; padding: 0; }
  .popup.visible.centered {display: flex!important;}
  .popup .b { max-height: none; overflow: visible; }
  .popup .icon-close { position: fixed; }
  .filter { background-color: #fff }
  .sect-08 { background-color: #fff }
  .form-pedido .box { padding: 1rem; }
}

/*Cookies*/
#cookie-bar { background: #6e7377; height: auto; color: #fff; text-align: center; padding: 1rem; position: fixed; z-index: 99; bottom: 0; left: 0; right: 0; }
#cookie-bar.fixed { position: fixed; top: 0; left: 0; width: 100%; }
#cookie-bar.fixed.bottom { bottom: 0; top: auto; }
#cookie-bar p { margin: 0; padding: 0; font-size: 1rem; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1rem; }
#cookie-bar a:link { color: #ffffff; display: inline-block; text-decoration: none; font-weight: bold; }
#cookie-bar a.cb-enable.btn-default { background-color: #ffffff; border: 0; padding: .5rem; line-height: 1; border-radius: .5rem; -webkit-border-radius: .5rem; color: #6d7276; white-space: nowrap; }
#cookie-bar a.cb-enable.btn-default:hover { background-color: #18c95f; color: #fff; }
@media (max-height:600px) { }