@font-face{font-family:Comex;src:url('../fonts/comex-medium.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Comex;src:url('../fonts/comex-bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:Atlas;src:url('../fonts/AtlasGrotesk-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Atlas;src:url('../fonts/AtlasGrotesk-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:Atlas;src:url('../fonts/AtlasGrotesk-Black.otf') format('opentype');font-weight:900;font-display:swap}
:root{--blue:#019bd8;--rose:#a87a70;--outside:#f3f5f8;--warm:#e0d5bd;--cool:#c3ccda;--cream:#f1eee5;--olive:#786333;--terra:#995e52;--wine:#643c38}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:url('../images/fb.jpg') center / cover no-repeat;font-family:Comex,Arial,sans-serif;line-height:1.4;-webkit-font-smoothing:antialiased}
.page{width:100%;max-width:480px;min-height:100vh;margin-inline:auto;background:var(--cream);container-type:inline-size}
img{display:block;max-width:100%;height:auto}
main{font-family:Atlas,Arial,sans-serif}
.topbar{display:grid;place-items:center;background:#009dda;padding:15px 0}
.topbar img{width:100px;height:auto}
.hero{position:relative;display:flex;align-items:center;min-height:225px;min-height:38cqw;padding:32px;color:#fff;background:var(--rose)}
h1{margin:0;font-size:clamp(25px,7.6cqw,46px);line-height:1.03;font-weight:900}
h1 span{display:block;font-weight:400}
.colorlife{position:absolute;right:26px;bottom:20px;width:82px;height:auto}
.calidos{background:var(--warm);color:var(--olive)}
.saturados{background:var(--cool);color:var(--terra)}
.reconfortantes{background:var(--cream);color:var(--wine)}
.intro{display:grid;grid-template-columns:1.05fr 1fr;gap:22px;padding:40px 32px;align-items:start;min-height:450px;min-height:76cqw}
.intro-copy{min-width:0}
h2{margin:0 0 54px;font-size:clamp(28px,9cqw,54px);line-height:.95;letter-spacing:-.055em;font-weight:700}
.saturados h2{font-size:clamp(28px,8cqw,48px)}
.reconfortantes h2{position:relative;z-index:1;font-size:clamp(19px,5.5cqw,33px);letter-spacing:-.06em;white-space:nowrap;margin-bottom:90px}
.intro p{margin:0;font-size:clamp(14px,3.25cqw,19.5px);line-height:1.27}
.intro>img{width:100%;align-self:center}
.carousel{position:relative}
.carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.carousel-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.slide img{width:100%;height:100%;aspect-ratio:1182/665;object-fit:cover}
.reconfortantes .slide img{aspect-ratio:1030/650}
.carousel-controls{display:flex;align-items:center;justify-content:space-between;padding:0 12px;min-height:44px}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;color:inherit;border:0;background:transparent;min-width:44px;min-height:44px;padding:0;touch-action:manipulation}
.previous,.next{font:400 32px/1 Arial,sans-serif}
.dots{display:flex;align-items:center;justify-content:center}
.dot{display:grid;place-items:center}
.dot span{width:7px;height:7px;border:1px solid currentColor;border-radius:50%;transition:background-color .2s}
.dot[aria-current=true] span{background:currentColor}
button:hover{background:rgb(255 255 255 / 25%)}
:focus-visible{outline:3px solid #00578b;outline-offset:-3px}
.copy{padding:24px 40px 38px;font-size:clamp(14px,3.25cqw,19.5px);line-height:1.35}
.copy p{margin:0 0 20px}
.copy p:last-child{margin-bottom:0}
.tips ul{padding-left:1em;margin:0}
.tips li{padding-left:2px;margin-bottom:14px}
.tips li:last-child{margin-bottom:0}
.materials-video{display:block;width:100%;height:auto;aspect-ratio:1080/408;object-fit:contain;background:rgb(0 0 0 / 5%)}
.materials-copy{padding-top:48px;padding-bottom:64px}
.registered{font-size:.55em;line-height:0;vertical-align:super;position:relative;top:-.05em}
.site-footer p{margin:0}
.footer-mexico{width:100%;height:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:480px){
  .hero{padding:28px 22px}.colorlife{right:20px;bottom:14px;width:68px}
  .intro{padding:30px 22px;gap:18px;min-height:0}
  h2{margin-bottom:36px}.reconfortantes h2{margin-bottom:60px}
  .copy{padding:22px 28px 30px}.materials-copy{padding-top:34px;padding-bottom:42px}
}
@media(min-width:600px){
  .page{margin-top:20px;margin-bottom:20px;border-radius:20px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.08)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.legal {
  padding: 14px 18px 24px;
  background-color: #009dda;
}

.legal p {
  font-size: 0.75rem;
  color: #fff;
  line-height: 1.4;
}
/* Franja de redes sociales compartida por los footers */
.social-banner {
  width: 100%;
  height: min(67px, 13.958vw);
  display: flex;
  align-items: center;
  gap: min(18px, 3.75vw);
  padding-left: min(17px, 3.542vw);
  overflow: hidden;
  background: #00a5df;
  border-bottom: min(2px, .417vw) solid #fff;
  color: #fff;
}
.social-banner h2 {
  flex: 0 0 min(58px, 12.083vw);
  margin: 0;
  font-family: Comex, sans-serif;
  font-weight: 700;
  letter-spacing: normal;
  font-size: min(15px, 3.125vw);
  line-height: 1;
  white-space: nowrap;
}
.social-links {
  flex: none;
  display: flex;
  align-items: center;
  gap: min(13px, 2.708vw);
}
.social-links a {
  flex: 0 0 min(25px, 5.208vw);
  width: min(25px, 5.208vw);
  height: min(25px, 5.208vw);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #00a5df;
  text-decoration: none;
  font-size: min(14px, 2.917vw);
}
.social-links .fa-tiktok,
.social-links .fa-youtube,
.social-links .fa-linkedin-in { font-size: min(13px, 2.708vw); }
@media (max-width: 600px) {
  .social-banner h2 { flex-basis: 62px; font-size: 16px; }
  .social-links a { flex-basis: 27px; width: 27px; height: 27px; font-size: 15px; }
  .social-links .fa-tiktok,
  .social-links .fa-youtube,
  .social-links .fa-linkedin-in { font-size: 14px; }
}
.social-banner + .legal {
  padding: min(10px, 2.083vw) min(17px, 3.542vw) min(16px, 3.333vw);
}
.social-banner + .legal p {
  font-size: min(10px, 2.083vw);
  line-height: 1.3;
}