*{box-sizing:border-box}
:root{
  --comex:#019BD8;
  --deep:#fff;
  --orange:#EE8D22;
  --text:#17202A;
  --muted:#5B6B7C;
  --white:#FFFFFF;
  --line:#E3E8EE;
  --grayBG:#F3F5F8;
  --maxw:600px;
  --radius:16px
}
html,body{height:100%}
body{
  margin:0;
  background:var(--grayBG);
  color:var(--text);
  font-family:"AtlasGrotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:300;
  line-height:1.45
}
.page{
  max-width:var(--maxw);
  margin:0 auto;
  background:var(--white)
}
img{display:block;max-width:100%;height:auto}
.topbar{
  background:var(--comex);
  padding:10px 16px;
  text-align:center
}
.logo{display:inline-block;height:auto}
.ribbon{
  background:var(--orange);
  color:#fff;
  font-family:"ComexMedium",system-ui,sans-serif;
  font-weight:600;
  text-align:center;
  padding:18px 16px;
  border-bottom:1px solid #E58F2B;
  font-size:clamp(1.5rem,3.6vw,1.25rem);
  letter-spacing: 1.5px;
}
.section{
  border-bottom:1px solid var(--line);
  background:var(--white)
}
.hero img{width:100%}
.color-ano .grid-two{
  background-color:#5D4250;
  display:grid;
  gap:0;
  align-items:center;
  grid-template-columns:1fr 1fr
}
.color-ano .media{margin:30px 2px 30px -30px;display:flex;align-items:center;justify-content:center}
.color-ano .media img{display:block;width:80%;height:auto}
.eyebrow{
  margin:0 0 6px;
  font-family:"AtlasGrotesk";
  font-weight:500;
  font-size:clamp(1.70rem,5.1vw,2.5rem);
  letter-spacing:1px;
  color:var(--deep);
  line-height:1.2
}
.title{
  margin:2rem 0 1rem;
  font-family:"AtlasGroteskRegular";
  font-weight:400;
  font-size:clamp(1rem,3.8vw,1.2rem);
  color:#FEFEFF;
  line-height:1
}
.code{
  font-family:"AtlasGroteskth";
  font-weight:500;
  color:#FEFEFF;
  font-size:clamp(.95rem,3.4vw,1.05rem)
}
.desc{color:var(--muted);margin:0 0 12px}
.flag-sep{padding:6px 16px 0;background:var(--white)}
.flag{
  display:inline-block;
  background:var(--comex);
  color:#fff;
  padding:.55rem .9rem;
  border-radius:.6rem .6rem 0 0;
  font-family:"ComexBold";
  font-weight:700;
  letter-spacing:.2px
}
.combo .combo-media{position:relative;margin:0}
.combo .combo-media img{border-radius:12px}
.combo .sticker{
  position:absolute;
  right:8px;
  bottom:8px;
  width:min(44vw,220px);
  height:auto
}
.combo.alt{background:#F6F8FA}
.cta{margin-top:10px}
.btn{
  display:inline-block;
  text-decoration:none;
  color:#fff;
  background:var(--comex);
  border:1px solid #2DB1D4;
  border-radius:999px;
  padding:.7rem 1rem;
  font-family:"ComexMedium";
  font-weight:500;
  font-size:clamp(.95rem,3.2vw,1rem)
}
.btn:hover{background:var(--deep);border-color:var(--deep)}
.btn.btn-sm{padding:.55rem .9rem;font-size:.95rem}
.grid-dl{display:grid}
.dl{
  display:grid;
  gap:30px;
  justify-items:center;
  text-align:center;
  padding:30px 16px 25px 16px;
  text-decoration:none;
  background:#EAEFF7
}
.dl .title{
  margin:0;
  color:#111;
  font-family:"ComexMedium";
  font-weight:500;
  line-height:1.2;
  font-size:clamp(1.1rem,3.2vw,1.15rem)
}
.pill{
  position:relative;
  display:inline-block;
  padding:12px 30px;
  background:#fff;
  color:#111;
  border:2px solid #111;
  border-radius:12px;
  font-family:"ComexMedium",system-ui,sans-serif;
  font-size:clamp(1rem,3vw,1.6rem);
  text-decoration:none;
  line-height:1;
  margin-bottom:28px
}
.pill::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-16px;
  width:78%;
  height:18px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.38) 0, rgba(0,0,0,.25) 35%, rgba(0,0,0,.12) 55%, transparent 70%);
  filter:blur(3px);
  pointer-events:none
}
.dl-light{background:#EAEFF7}
.dl-coral{background:#F26D54;color:#fff;border-color:transparent}
.dl-coral .title{color:#fff}
.dl-yellow{background:#F0CE4E;color:#222;border-color:transparent}
.dl-purple{background:#6E4D7B;color:#fff;border-color:transparent}
.dl-purple .title{color:#fff}
.site-footer{
  background:#009DDA;
  padding:16px
}
.site-footer1{
  background:#5D4350;
  padding:26px
}
.site-footer2{
  background:#B67A62;
  padding:26px
}
.site-footer3{
  background:#364657;
  padding:26px
}
.site-footer4{
  background:#BFC4B0;
  padding:26px
}
.site-footer5{
  background:#99B1A3;
  padding:26px
}
.site-footer small{
  font-family:"ComexMedium";
  font-weight:500;
  color:#fff;
  font-size:clamp(.7rem,2.6vw,.8rem);
  line-height:1;
}
.xoco-block{
  background:#5D4250;
  color:#E1DEDF;
  padding:48px 16px 56px;
  border-bottom:1px solid #4b3a41
}
.xoco-block1{
  background:#CCDADD;
  color:#1D1D1B;
  padding:48px 16px 56px;

}
.xoco-block2{
  background:#fff;
  color:#B3A2A3;
  padding:48px 16px 0px;

}
.xoco-block3{
  background:#fff;
  color:#364656;
  padding:8px 16px 0px;

}
.xoco-block4{
  background:#fff;
  color:#674E5B;
  padding:8px 16px 0px;

}
.xoco-block5{
  background:#fff;
  color:#699697;
  padding:8px 16px 0px;

}


.xoco-wrap{padding-left:16px;padding-right:16px}
.btn-xoco{
  display:block;
  width:fit-content;
  margin:0 auto 32px;
  padding:9px 28px;
  background:#d9e6ea;
  color:#111;
  border:2px solid #2a2a2a;
  border-radius:12px;
  font-family:"ComexMedium",system-ui,sans-serif;
  font-size:clamp(1rem,3vw,1.2rem);
  text-decoration:none
}
.xoco-title{
  padding-top:30px;
  margin:0 0 8px;
  font-family:"AtlasGrotesk",system-ui,sans-serif;
  font-weight:500;
  font-size:clamp(1.20rem,3.6vw,1.2rem);
  line-height:1;
  letter-spacing:.5px;
  text-transform:uppercase
}

.xoco-titleinterior{
  padding-top:30px;
  margin:0 0 8px;
  font-family:"AtlasGrotesk",system-ui,sans-serif;
  font-weight:500;
  font-size:clamp(1rem,5.8vw,2.52rem);
  line-height:1;
  letter-spacing:.5px;
  text-transform:uppercase
}
.xoco-code{
  font-family:"AtlasGroteskth",system-ui,sans-serif;
  font-weight:500;
  font-size:clamp(1.40rem,3.2vw,1.05rem);
  margin:0 0 24px
}

.xoco-codeinterior{
  font-family:"AtlasGroteskth",system-ui,sans-serif;
  font-weight:500;
  font-size:clamp(.95rem,5.2vw,2.05rem);
  margin:0 0 24px
}
.xoco-text{
  max-width:820px;
  font-family:"AtlasGroteskRegular",system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(.52rem,3.2vw,0.50rem);
  line-height:1.55
}

.xoco-textinterior{
   
  max-width:820px;
  font-family:"AtlasGroteskth",system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(.75rem,3.2vw,0.50rem);
  line-height:1.25;
  letter-spacing:.5px;
}
.img-bleed{padding:0;margin:0;border:0}
.img-bleed img{display:block;width:100%;height:auto}
.xxoco-text{background:#5D4250;color:#fff;padding:40px 16px;width:100%}
.xxtext{padding-left:16px;padding-right:16px}
.xxtext p{
  font-family:"AtlasGroteskRegular",system-ui,sans-serif;
  font-weight:400;
 font-size:clamp(.55rem,3.2vw,0.50rem);
  line-height:1.55;
  margin:0
}
.cta-palette{background:#CDDADD;padding:28px 16px;text-align:center}
.cta-line{
  margin:0;
  font-family:"ComexMedium",system-ui,sans-serif;
  font-weight:500;
  font-size:clamp(1.25rem,3.6vw,2.1rem);
  line-height:1.2;
  color:#111
}
.trama-sagrada{background:#ffffff;padding:32px 16px}
.ts-grid{
  display:grid;
  gap:16px;
  align-items:center;
  grid-template-columns:1fr 1fr
}
.ts-title{
  position:relative;
  display:block;
  width:fit-content;
  margin:0 auto 14px;
  font-family:"AtlasGrotesk",system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(1.45rem,5.6vw,1.8rem);
  line-height:1.1;
  color:#806059;
  text-align:center;
  text-shadow:0.06em 0em 0 #E1BB6A;
  letter-spacing:4px
}
.ts-desc{
  margin:0;
  max-width:42ch;
  font-family:"AtlasGroteskth",system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(.55rem,2.2vw,1.05rem);
  line-height:1.35;
  color:#B1B293;
  text-align:center
}
.ts-media{margin:0;justify-self:center}
.ts-media img{display:block;width:min(92%,520px);height:auto}
.flag-gradient{
  background:linear-gradient(90deg,#B1B293 70%,#FFFFFF 100%);
  padding:10px 16px;
  text-align:center
}
.flag-gradient1{
  background:linear-gradient(90deg,#F7D562 70%,#FFFFFF 100%);
  padding:10px 16px;
  text-align:center
}
.flag-gradient2{
  background:linear-gradient(90deg,#5D4250 70%,#FFFFFF 100%);
  padding:10px 16px;
  text-align:center
}
.flag-gradient3{
  background:linear-gradient(90deg,#98B1A3 70%,#FFFFFF 100%);
  padding:10px 16px;
  text-align:center
}
.flag-gradient-title{
  margin:0px;
  font-family:"ComexBold",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(1.05rem,3.4vw,1.9rem);
  color:#FFFFFF
}
.flag-gradient-title1{
  margin:0px;
  font-family:"ComexBold",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(1.05rem,3.4vw,1.9rem);
  color:#000
}
.trama-salsita{background:#ffffff;padding:16px 16px}
.tsa-grid{
  display:grid;
  gap:16px;
  align-items:center;
  grid-template-columns:1fr 1fr
}
.tsa-title{
  position:relative;
  display:block;
  width:fit-content;
  margin:0 auto 14px;
  font-family:"AtlasGrotesk",system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(1.45rem,5.6vw,1.8rem);
  line-height:1.1;
  color:#D66741;
  text-align:center;
  text-shadow:0.06em 0em 0 #82956F;
  letter-spacing:1px
}
.tsa-desc{
  margin-top:20px;
  max-width:42ch;
  font-family:"AtlasGroteskth",system-ui,sans-serif;
  font-weight:400;
     font-size:clamp(.55rem, 2.2vw, 1.05rem);
  line-height:1.35;
  color:#305155;
  text-align:center
}
.tsa-media{margin:0;justify-self:center}
.tsa-media img{display:block;width:min(92%,520px);height:auto}
.btn-salsita{
  display:block;
  width:fit-content;
  margin:25px auto 50px;
  padding:10px 30px;
  background:#B57A61;
  color:#fff;
  font-weight:300;
  border-radius:12px;
  font-family:"ComexMedium",system-ui,sans-serif;
  font-size:clamp(1rem,3vw,1.2rem);
  text-decoration:none
}
.trama-oxidacion{background:#ffffff;padding:16px 16px}
.tso-grid{
  display:grid;
  gap:16px;
  align-items:center;
  grid-template-columns:1fr 1fr
}
.tso-title{
  position:relative;
  display:block;
  width:fit-content;
  margin:0 auto 14px;
  font-family:"AtlasGrotesk",system-ui,sans-serif;
  font-weight:800;
 font-size:clamp(1.45rem,5.6vw,1.8rem);
  line-height:1.1;
  color:#BFC4B0;
  text-align:center;
  text-shadow:0.06em 0em 0 #748C7B;
  letter-spacing:2px
}
.tso-desc{
  margin-top:20px;
  max-width:40ch;
  font-family:"AtlasGroteskth",system-ui,sans-serif;
  font-weight:400;
    font-size:clamp(.55rem, 2.2vw, 1.05rem);
  line-height:1.35;
  color:#9F624D;
  text-align:center
}
.tso-media{margin:0;justify-self:center}
.tso-media img{display:block;width:min(92%,520px);height:auto}
.btn-oxidacion{
  display:block;
  width:fit-content;
  margin:25px auto 50px;
  padding:10px 30px;
  background:#374656;
  color:#fff;
  font-weight:300;
  border-radius:12px;
  font-family:"ComexMedium",system-ui,sans-serif;
  font-size:clamp(1rem,3vw,1.2rem);
  text-decoration:none
}
.trama-infinito{background:#ffffff;padding:16px 16px}
.tsi-grid{
  display:grid;
  gap:16px;
  align-items:center;
  grid-template-columns:1fr 1fr
}
.tsi-title{
  position:relative;
  display:block;
  width:fit-content;
  margin:0 auto 14px;
  font-family:"AtlasGrotesk",system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(1.45rem,5.6vw,1.8rem);
  line-height:1.1;
  color:#9F596F;
  text-align:center;
  text-shadow:0.06em 0em 0 #BFC5D0;
  letter-spacing:2px
}
.tsi-desc{
  margin-top:20px;
  max-width:40ch;
  font-family:"AtlasGroteskth",system-ui,sans-serif;
  font-weight:400;
   font-size:clamp(.55rem, 2.2vw, 1.05rem);
  line-height:1.35;
  color:#1D1D1B;
  text-align:center
}
.tsi-media{margin:0;justify-self:center}
.tsi-media img{display:block;width:min(92%,520px);height:auto}
.btn-infinito{
  display:block;
  width:fit-content;
  margin:25px auto 50px;
  padding:10px 30px;
  background:#5D4250;
  color:#fff;
  font-weight:300;
  border-radius:12px;
  font-family:"ComexMedium",system-ui,sans-serif;
  font-size:clamp(1rem,3vw,1.2rem);
  text-decoration:none
}
.btn-infinitoo{
  display:block;
  width:fit-content;
  margin:25px auto 25px;
  padding:10px 30px;
  background:#98B1A3;
  color:#fff;
  font-weight:300;
  border-radius:12px;
  font-family:"ComexMedium",system-ui,sans-serif;
  font-size:clamp(1rem,3vw,1.2rem);
  text-decoration:none
}
@media(max-width:599px){
  .color-ano .grid-two,
  .ts-grid,
  .tsa-grid,
  .tso-grid,
  .tsi-grid{
    grid-template-columns:minmax(160px,1fr) minmax(160px,1fr);
    column-gap:12px
  }
  .color-ano .media{
      /*margin: 18px 0 22px 0;*/
      justify-content: flex-start;
      
  }
  .color-ano .media img{width:92%}
}
.mvid-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:999999;padding:16px}
  .mvid-modal{position:relative;width:100%;max-width:900px;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 10px 35px rgba(0,0,0,.45)}
  .mvid-close{position:absolute;top:8px;right:8px;height:44px;width:44px;border:none;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:22px;line-height:44px;cursor:pointer;z-index:2}
  .mvid-iframe, .mvid-video{position:absolute;inset:0;height:100%;width:100%;border:0;background:#000;display:block}
  @media (max-width: 599px){
    .mvid-modal{width:100%;max-width:none;aspect-ratio:auto;height:56.25vw;max-height:75vh}
    .mvid-close{height:48px;width:48px;font-size:24px}
  }
  body.mvid-lock{overflow:hidden;touch-action:none}