/** Shopify CDN: Minification failed

Line 8:24 Unexpected "@import"
Line 542:24 Unexpected "@property"

**/

#landing-magnesio-12en1 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');


:root{--papel:#FFFFFF;
  --boton:#111111;
  --boton-hondo:#000000;
  --tinta:#111111;
  --ancho:560px;}
#landing-magnesio-12en1 *{box-sizing:border-box}
#landing-magnesio-12en1 .lienzo{max-width:var(--ancho); margin:0 auto; background:var(--papel);
  color:var(--tinta); overflow:hidden;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}
#landing-magnesio-12en1 .lienzo img,#landing-magnesio-12en1 .lienzo video{display:block; max-width:100%; height:auto}
#landing-magnesio-12en1 .np-cuenta__hueco{display:block !important; height:48px !important}
#landing-magnesio-12en1 .galeria{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
#landing-magnesio-12en1 .galeria::-webkit-scrollbar{display:none}
#landing-magnesio-12en1 .galeria figure{flex:0 0 100%; scroll-snap-align:center; margin:0}
#landing-magnesio-12en1 .puntos{display:flex; justify-content:center; gap:6px; padding:12px 0 2px}
#landing-magnesio-12en1 .puntos i{width:6px; height:6px; border-radius:50%; background:#D4D4D4; transition:background .2s}
#landing-magnesio-12en1 .puntos i.on{background:#111}
#landing-magnesio-12en1 .np-cabecera,#landing-magnesio-12en1 .np-urgencia,#landing-magnesio-12en1 .np-cuenta__envio,#landing-magnesio-12en1 .np-lote,#landing-magnesio-12en1 .np-stock__aviso,#landing-magnesio-12en1 .boton__nota{display:none !important}
#landing-magnesio-12en1 .np-cabecera__antes,#landing-magnesio-12en1 .np-precio__antes{display:none !important}
#landing-magnesio-12en1 .np-variantes input[type="radio"]{position:absolute !important; width:1px !important; height:1px !important;
  opacity:0 !important; pointer-events:none !important}
#landing-magnesio-12en1 .kb{display:flex; flex-direction:column; margin:14px 15px 0}
#landing-magnesio-12en1 .kb__bar{margin:5px 0; position:relative}
#landing-magnesio-12en1 .kb__box{display:flex; flex-direction:column; justify-content:center;
  padding:10px 20px; border-radius:8px; cursor:pointer;
  background:#EEF3F1; box-shadow:inset 0 0 0 1px rgba(7,84,49,.3)}
#landing-magnesio-12en1 .kb__bar--sel .kb__box{background:#FFFFFF; box-shadow:inset 0 0 0 2px #075431}
#landing-magnesio-12en1 .kb__radio{flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  border:3px solid #fff; background:#fff; box-shadow:0 0 0 2px rgba(7,84,49,.3)}
#landing-magnesio-12en1 .kb__bar--sel .kb__radio{background:#075431; box-shadow:0 0 0 2px #075431}
#landing-magnesio-12en1 .kb__content{display:flex; flex-direction:row; align-items:center;
  justify-content:space-between; gap:8px; flex:1 1 0}
#landing-magnesio-12en1 .kb__box{flex-direction:row; align-items:center; gap:18px; min-height:55px}
#landing-magnesio-12en1 .kb__left{display:flex; flex-direction:column; align-items:flex-start; flex:1 1 0}
#landing-magnesio-12en1 .kb__line1{display:flex; flex-direction:row; align-items:center;
  flex-wrap:wrap; column-gap:8px}
#landing-magnesio-12en1 .kb__title{font-size:20px; font-weight:700; line-height:28px; color:#000}
#landing-magnesio-12en1 .kb__label{display:inline-flex; align-items:center; justify-content:center;
  gap:4px; padding:4px 8px; border-radius:8px; background:#F1E2B1;
  font-size:12px; line-height:16.8px; color:#000}
#landing-magnesio-12en1 .kb__sub{display:block; font-size:14px; line-height:19.6px; color:#555}
#landing-magnesio-12en1 .kb__pricing{display:flex; flex-direction:column; align-items:flex-end}
#landing-magnesio-12en1 .kb__price{font-size:20px; font-weight:700; line-height:28px; color:#000}
#landing-magnesio-12en1 .kb__full{font-size:14px; line-height:19.6px; color:#555; text-decoration:line-through}
#landing-magnesio-12en1 .sw-hero{margin-top: 24px;
    margin-bottom: 28px;
    width: 100%;}
#landing-magnesio-12en1 .sw-hero *{box-sizing: border-box;}
#landing-magnesio-12en1 .sw-hero__title{display: inline-block;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
    font-size: clamp(24px, 3.4vw, 36px) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    text-transform: none !important;
    margin: 0 0 18px 0 !important;
    padding-bottom: 0.08em;
    color: #221A12 !important;}
@supports (-webkit-background-clip: text) or (background-clip: text){
#landing-magnesio-12en1 .sw-hero__title{background-image: linear-gradient(95deg, #1E1710 0%, #241C13 46%, #6E5626 62%, #A6832F 78%, #C2A04A 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent !important;
      color: transparent !important;}}
#landing-magnesio-12en1 .sw-hero__badge{display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 17px;
    border-radius: 999px;
    background: linear-gradient(180deg, #FCF5DA 0%, #F1DC96 100%);
    border: 1px solid #E8CF88;
    margin: 0 0 24px 0;}
#landing-magnesio-12en1 .sw-hero__stars{flex: 0 0 auto;
    font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif !important;
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: 0.5px !important;
    font-weight: 400 !important;
    white-space: nowrap;
    color: #2E2419 !important;
    -webkit-text-fill-color: #2E2419 !important;}
#landing-magnesio-12en1 .sw-hero__rating{font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    color: #2E2419 !important;
    -webkit-text-fill-color: #2E2419 !important;}
#landing-magnesio-12en1 .sw-hero__benefits{list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    gap: 18px;}
#landing-magnesio-12en1 .sw-hero__benefit{display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;}
#landing-magnesio-12en1 .sw-hero__benefit::marker{content: '';}
#landing-magnesio-12en1 .sw-hero__icon{flex: 0 0 auto;
    font-size: 22px;
    line-height: 1.3;}
#landing-magnesio-12en1 .sw-hero__text{font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #241C13 !important;}
@media screen and (max-width: 749px){
#landing-magnesio-12en1 .sw-hero__title{font-size: 26px !important;
      margin-bottom: 14px !important;}
#landing-magnesio-12en1 .sw-hero__badge{margin-bottom: 18px;
      padding: 6px 14px;
      gap: 8px;}
#landing-magnesio-12en1 .sw-hero__stars{font-size: 14px !important;}
#landing-magnesio-12en1 .sw-hero__rating{font-size: 14px !important;}
#landing-magnesio-12en1 .sw-hero__benefits{gap: 14px;}
#landing-magnesio-12en1 .sw-hero__icon{font-size: 19px;}
#landing-magnesio-12en1 .sw-hero__text{font-size: 15px !important;}}
#landing-magnesio-12en1 #ProductSubmitButton-template--21010507366536__main,#landing-magnesio-12en1 #SectionAtcBtn-template--21010507366536__main{--icon-scale: 1.2em;
    --icon-spacing: 10px;}
#landing-magnesio-12en1 #ProductSubmitButton-template--21010507366536__main .main-atc__label{display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--icon-spacing);}
#landing-magnesio-12en1 #ProductSubmitButton-template--21010507366536__main .main-atc__label__icon{height: var(--icon-scale);
    width: auto;
    flex-shrink: 0;
    padding-bottom: 0;}
#landing-magnesio-12en1 #ProductSubmitButton-template--21010507366536__main .main-atc__label__icon::before{display: none;}
#landing-magnesio-12en1 #ProductSubmitButton-template--21010507366536__main .main-atc__label__icon img{position: static;
    width: auto;
    height: 100%;
    object-fit: contain;}
#landing-magnesio-12en1 #ProductSubmitButton-template--21010507366536__main .main-atc__label__text{display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 3px;}
#landing-magnesio-12en1 #ProductSubmitButton-template--21010507366536__main .main-atc__label__line-1{font-size: 18px;
    display: inline-flex;
    align-items: center;
    gap: var(--icon-spacing);}
#landing-magnesio-12en1 #ProductSubmitButton-template--21010507366536__main .main-atc__label__line-2{font-size: 12px;
    text-transform: none;}
#landing-magnesio-12en1 .sw-bump{margin-top: 24px;
    margin-bottom: 24px;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;}
#landing-magnesio-12en1 .sw-bump *{box-sizing: border-box;}
@keyframes sw-bump-in{
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
@keyframes sw-bump-swap{
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
@keyframes sw-bump-blink{
    0%   { opacity: 1; }
    50%  { opacity: 0.45; }
    100% { opacity: 1; }
  }
@keyframes sw-bump-ring{
    0%   { transform: scale(1);   opacity: 0.5; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
  }
@keyframes sw-bump-pop{
    0%   { transform: scale(1); }
    45%  { transform: scale(1.12); }
    100% { transform: scale(1); }
  }
#landing-magnesio-12en1 .sw-bump__head{display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px 0;
    animation: sw-bump-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;}
#landing-magnesio-12en1 .sw-bump__headtitle{font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    color: #1F2430 !important;}
#landing-magnesio-12en1 .sw-bump__nav{display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;}
#landing-magnesio-12en1 .sw-bump__arrow{background: none;
    border: 0;
    padding: 2px;
    cursor: pointer;
    line-height: 0;
    color: #6B7280 !important;
    transition: color 0.2s ease, transform 0.2s ease;}
#landing-magnesio-12en1 .sw-bump__arrow svg{width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;}
#landing-magnesio-12en1 .sw-bump__arrow--sm svg{width: 15px;
    height: 15px;}
#landing-magnesio-12en1 .sw-bump__arrow:hover{color: #1F2430 !important;
    transform: scale(1.18);}
#landing-magnesio-12en1 .sw-bump__arrow:active{transform: scale(0.94);}
#landing-magnesio-12en1 .sw-bump__offer{display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px solid #E3E6EA;
    border-radius: 10px;
    background: #FFFFFF;
    animation: sw-bump-in 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 0.06s backwards;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.28s ease,
                border-color 0.28s ease;}
#landing-magnesio-12en1 .sw-bump__offer:hover{transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(31, 36, 48, 0.11);
    border-color: #CFD5DD;}
#landing-magnesio-12en1 .sw-bump__offer[hidden]{display: none;}
#landing-magnesio-12en1 .sw-bump__thumb{flex: 0 0 auto;
    width: 76px;
    height: 76px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #2B2B2B;}
#landing-magnesio-12en1 .sw-bump__thumb img{width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-bump__offer:hover .sw-bump__thumb img{transform: scale(1.07);}
#landing-magnesio-12en1 .sw-bump__info{flex: 1 1 auto;
    min-width: 0;}
#landing-magnesio-12en1 .sw-bump__name{font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    margin: 0 0 6px 0 !important;
    color: #1F2430 !important;}
#landing-magnesio-12en1 .sw-bump__prices{margin: 0 !important;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;}
#landing-magnesio-12en1 .sw-bump__price{font-size: 16px !important;
    font-weight: 700 !important;
    color: #17A34A !important;}
#landing-magnesio-12en1 .sw-bump__compare{font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: line-through;
    color: #A8AEB8 !important;}
#landing-magnesio-12en1 .sw-bump__added{flex: 0 0 auto;
    width: 52px;
    height: 40px;
    border-radius: 7px;
    background: #A97D1C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.25s ease;}
#landing-magnesio-12en1 .sw-bump__offer:hover .sw-bump__added{animation: sw-bump-pop 0.45s ease;
    box-shadow: 0 6px 14px rgba(169, 125, 28, 0.34);}
#landing-magnesio-12en1 .sw-bump__added svg{width: 21px;
    height: 21px;
    display: block;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;}
#landing-magnesio-12en1 .sw-bump__stock{display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    margin: 16px 0 18px 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    color: #1F2430 !important;
    animation: sw-bump-in 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 0.12s backwards;}
#landing-magnesio-12en1 .sw-bump__dot{position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F0483E;
    flex: 0 0 auto;
    animation: sw-bump-blink 1.6s ease-in-out infinite;}
#landing-magnesio-12en1 .sw-bump__dot::after{content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #F0483E;
    animation: sw-bump-ring 1.6s ease-out infinite;
    pointer-events: none;}
#landing-magnesio-12en1 .sw-bump__alert{font-weight: 700 !important;
    letter-spacing: 0.01em;
    color: #E5342B !important;}
#landing-magnesio-12en1 .sw-bump__stock strong{font-weight: 700 !important;
    color: #1F2430 !important;}
#landing-magnesio-12en1 .sw-bump__reviews{border: 1px solid #E3E6EA;
    border-radius: 10px;
    background: #FFFFFF;
    padding: 20px 20px 12px 20px;
    animation: sw-bump-in 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 0.18s backwards;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.28s ease,
                border-color 0.28s ease;}
#landing-magnesio-12en1 .sw-bump__reviews:hover{transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(31, 36, 48, 0.11);
    border-color: #CFD5DD;}
#landing-magnesio-12en1 .sw-bump__review{animation: sw-bump-swap 0.35s ease;}
#landing-magnesio-12en1 .sw-bump__review[hidden]{display: none;}
#landing-magnesio-12en1 .sw-bump__stars{display: block;
    font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    margin-bottom: 12px;
    color: #F5A623 !important;
    -webkit-text-fill-color: #F5A623 !important;}
#landing-magnesio-12en1 .sw-bump__quote{font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 10px 0 !important;
    color: #1F2430 !important;}
#landing-magnesio-12en1 .sw-bump__body{font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin: 0 0 14px 0 !important;
    color: #6B7280 !important;}
#landing-magnesio-12en1 .sw-bump__author{font-size: 13.5px !important;
    font-style: italic !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: #A0A6B0 !important;}
#landing-magnesio-12en1 .sw-bump__controls{display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #EDEFF2;}
#landing-magnesio-12en1 .sw-bump__dots{display: inline-flex;
    align-items: center;
    gap: 7px;}
#landing-magnesio-12en1 .sw-bump__pip{width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D5D9DF;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;}
#landing-magnesio-12en1 .sw-bump__pip:hover{background: #9AA1AC;
    transform: scale(1.25);}
#landing-magnesio-12en1 .sw-bump__pip.is-active{background: #3A4150;
    transform: scale(1.15);}
@media (prefers-reduced-motion: reduce){
#landing-magnesio-12en1 .sw-bump__head,#landing-magnesio-12en1 .sw-bump__offer,#landing-magnesio-12en1 .sw-bump__stock,#landing-magnesio-12en1 .sw-bump__reviews,#landing-magnesio-12en1 .sw-bump__review,#landing-magnesio-12en1 .sw-bump__dot,#landing-magnesio-12en1 .sw-bump__dot::after,#landing-magnesio-12en1 .sw-bump__offer:hover .sw-bump__added{animation: none !important;}
#landing-magnesio-12en1 .sw-bump__offer:hover,#landing-magnesio-12en1 .sw-bump__reviews:hover,#landing-magnesio-12en1 .sw-bump__offer:hover .sw-bump__thumb img,#landing-magnesio-12en1 .sw-bump__arrow:hover,#landing-magnesio-12en1 .sw-bump__pip:hover{transform: none !important;}}
@media screen and (max-width: 749px){
#landing-magnesio-12en1 .sw-bump__headtitle{font-size: 15.5px !important;}
#landing-magnesio-12en1 .sw-bump__offer{gap: 12px;
      padding: 12px;}
#landing-magnesio-12en1 .sw-bump__thumb{width: 64px;
      height: 64px;}
#landing-magnesio-12en1 .sw-bump__name{font-size: 14px !important;}
#landing-magnesio-12en1 .sw-bump__added{width: 46px;
      height: 38px;}
#landing-magnesio-12en1 .sw-bump__stock{padding-left: 10px;}
#landing-magnesio-12en1 .sw-bump__reviews{padding: 16px 16px 10px 16px;}
#landing-magnesio-12en1 .sw-bump__quote{font-size: 15px !important;}
#landing-magnesio-12en1 .sw-bump__body{font-size: 14px !important;}}
#landing-magnesio-12en1 .sw-faq{margin-top: 24px;
    margin-bottom: 24px;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;}
#landing-magnesio-12en1 .sw-faq *{box-sizing: border-box;}
#landing-magnesio-12en1 .sw-faq__item{border-top: 1px solid #E6E8EB;}
#landing-magnesio-12en1 .sw-faq__item:last-child{border-bottom: 1px solid #E6E8EB;}
#landing-magnesio-12en1 .sw-faq__head{display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 20px 4px;
    cursor: pointer;
    list-style: none;
    transition: opacity 0.2s ease;}
#landing-magnesio-12en1 .sw-faq__head::-webkit-details-marker{display: none;}
#landing-magnesio-12en1 .sw-faq__head::marker{content: '';}
#landing-magnesio-12en1 .sw-faq__head:hover{opacity: 0.62;}
#landing-magnesio-12en1 .sw-faq__icon{flex: 0 0 auto;
    font-size: 17px;
    line-height: 1;}
#landing-magnesio-12en1 .sw-faq__title{flex: 1 1 auto;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    color: #121417 !important;
    -webkit-text-fill-color: #121417 !important;}
#landing-magnesio-12en1 .sw-faq__chev{flex: 0 0 auto;
    line-height: 0;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-faq__chev svg{width: 19px;
    height: 19px;
    display: block;
    fill: none;
    stroke: #6E7683;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;}
#landing-magnesio-12en1 .sw-faq__item[open] .sw-faq__chev{transform: rotate(180deg);}
#landing-magnesio-12en1 .sw-faq__panel{display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.38s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-faq__item[open] .sw-faq__panel{grid-template-rows: 1fr;}
#landing-magnesio-12en1 .sw-faq__clip{overflow: hidden;}
#landing-magnesio-12en1 .sw-faq__content{padding: 0 4px 24px 4px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease 0.06s, transform 0.3s ease 0.06s;}
#landing-magnesio-12en1 .sw-faq__item[open] .sw-faq__content{opacity: 1;
    transform: translateY(0);}
#landing-magnesio-12en1 .sw-faq__content p{font-size: 16.5px !important;
    font-weight: 400 !important;
    line-height: 1.62 !important;
    margin: 0 0 18px 0 !important;
    color: #1B1F24 !important;
    -webkit-text-fill-color: #1B1F24 !important;}
#landing-magnesio-12en1 .sw-faq__content p:last-child{margin-bottom: 0 !important;}
#landing-magnesio-12en1 .sw-faq__content strong{font-weight: 700 !important;
    color: #121417 !important;
    -webkit-text-fill-color: #121417 !important;}
@media (prefers-reduced-motion: reduce){
#landing-magnesio-12en1 .sw-faq__panel,#landing-magnesio-12en1 .sw-faq__chev,#landing-magnesio-12en1 .sw-faq__content{transition: none !important;}}
@media screen and (max-width: 749px){
#landing-magnesio-12en1 .sw-faq__head{padding: 17px 2px;
      gap: 9px;}
#landing-magnesio-12en1 .sw-faq__title{font-size: 14.5px !important;}
#landing-magnesio-12en1 .sw-faq__content{padding: 0 2px 20px 2px;}
#landing-magnesio-12en1 .sw-faq__content p{font-size: 15.5px !important;
      line-height: 1.58 !important;
      margin-bottom: 15px !important;}}
#landing-magnesio-12en1 .sw-sleep{margin-top: 24px;
    margin-bottom: 0px;
    width: 100%;
    padding: 46px 34px 50px 34px;
    background: #08080C;
    border-radius: 18px 18px 0 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;}
#landing-magnesio-12en1 .sw-sleep *{box-sizing: border-box;}
@keyframes sw-sleep-in{
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
#landing-magnesio-12en1 .sw-sleep.sw-js [data-sw-reveal]{opacity: 0;}
#landing-magnesio-12en1 .sw-sleep.sw-js [data-sw-reveal].is-visible{opacity: 1;
    animation: sw-sleep-in 0.75s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-sleep.sw-js .sw-sleep__card.is-visible{animation-delay: 0.12s;}
#landing-magnesio-12en1 .sw-sleep__title{max-width: 1000px;
    margin: 0 auto 34px auto !important;
    text-align: center;
    font-size: clamp(21px, 2.5vw, 33px) !important;
    line-height: 1.24 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;}
#landing-magnesio-12en1 .sw-sleep__card{display: flex;
    align-items: center;
    gap: 34px;
    padding: 26px;
    border-radius: 22px;
    background: #15151B;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;}
#landing-magnesio-12en1 .sw-sleep__card:hover{transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6);}
#landing-magnesio-12en1 .sw-sleep__media{flex: 1 1 50%;
    min-width: 0;
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;}
#landing-magnesio-12en1 .sw-sleep__media img{width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-sleep__media:hover img{transform: scale(1.04);}
#landing-magnesio-12en1 .sw-sleep__text{flex: 1 1 50%;
    min-width: 0;
    padding-right: 12px;}
#landing-magnesio-12en1 .sw-sleep__text p{margin: 0 !important;
    font-size: clamp(16px, 1.5vw, 21px) !important;
    line-height: 1.58 !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
    color: #CFC9C0 !important;
    -webkit-text-fill-color: #CFC9C0 !important;}
#landing-magnesio-12en1 .sw-sleep__text strong{font-weight: 700 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;}
@media (prefers-reduced-motion: reduce){
#landing-magnesio-12en1 .sw-sleep.sw-js [data-sw-reveal],#landing-magnesio-12en1 .sw-sleep.sw-js [data-sw-reveal].is-visible{animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;}
#landing-magnesio-12en1 .sw-sleep__card:hover,#landing-magnesio-12en1 .sw-sleep__media:hover img{transform: none !important;}}
@media screen and (max-width: 749px){
#landing-magnesio-12en1 .sw-sleep{padding: 30px 18px 34px 18px;
      border-radius: 14px 14px 0 0;}
#landing-magnesio-12en1 .sw-sleep__title{margin-bottom: 0px !important;}
#landing-magnesio-12en1 .sw-sleep__card{flex-direction: column;
      align-items: stretch;
      gap: 20px;
      padding: 16px;
      border-radius: 16px;}
#landing-magnesio-12en1 .sw-sleep__text{padding-right: 0;}
#landing-magnesio-12en1 .sw-sleep__text p{font-size: 16px !important;
      line-height: 1.55 !important;}}
#landing-magnesio-12en1 @property --pct{syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;}
#landing-magnesio-12en1 .sw-stats{margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;
    padding: 34px 32px 36px 32px;
    background: #0A0A0C;
    border: 1px solid #26262B;
    border-radius: 0px 0px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;}
#landing-magnesio-12en1 .sw-stats *{box-sizing: border-box;}
@keyframes sw-stats-in{
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
@keyframes sw-stats-fill{
    from { --pct: 0%; }
  }
#landing-magnesio-12en1 .sw-stats.sw-js [data-sw-reveal]{opacity: 0;}
#landing-magnesio-12en1 .sw-stats.sw-js [data-sw-reveal].is-visible{opacity: 1;
    animation: sw-stats-in 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) both;}
#landing-magnesio-12en1 .sw-stats.sw-js .sw-stats__title.is-visible{animation-delay: 0.08s;}
#landing-magnesio-12en1 .sw-stats.sw-js .sw-stats__note.is-visible{animation-delay: 0.16s;}
#landing-magnesio-12en1 .sw-stats.sw-js .sw-stats__row.is-visible .sw-stats__ring{animation: sw-stats-fill 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;}
#landing-magnesio-12en1 .sw-stats.sw-js .sw-stats__row:nth-child(2).is-visible .sw-stats__ring{animation-delay: 0.4s;}
#landing-magnesio-12en1 .sw-stats.sw-js .sw-stats__row:nth-child(3).is-visible .sw-stats__ring{animation-delay: 0.55s;}
#landing-magnesio-12en1 .sw-stats .sw-stats__badge{display: inline-block;
    padding: 9px 19px;
    border: 1px solid #6E5A2A;
    border-radius: 999px;
    background: #1B170F;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    text-transform: uppercase;
    color: #E9D9A8 !important;
    -webkit-text-fill-color: #E9D9A8 !important;}
#landing-magnesio-12en1 .sw-stats .sw-stats__title{margin: 18px 0 6px 0 !important;
    font-size: clamp(23px, 2.6vw, 35px) !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;}
#landing-magnesio-12en1 .sw-stats .sw-stats__note{margin: 0 0 26px 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #B79A57 !important;
    -webkit-text-fill-color: #B79A57 !important;}
#landing-magnesio-12en1 .sw-stats__rows{display: grid;
    gap: 18px;}
#landing-magnesio-12en1 .sw-stats__row{display: flex;
    align-items: center;
    gap: 26px;
    padding: 22px 26px;
    background: #141418;
    border: 1px solid #232329;
    border-radius: 18px;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
                border-color 0.28s ease,
                background 0.28s ease;}
#landing-magnesio-12en1 .sw-stats__row:hover{transform: translateY(-3px);
    border-color: #4A422C;
    background: #17171C;}
#landing-magnesio-12en1 .sw-stats__ring{position: relative;
    flex: 0 0 auto;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: conic-gradient(#EEDCA4 0 var(--pct), #2C2C33 var(--pct) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-stats__ring::before{content: '';
    position: absolute;
    z-index: 0;
    top: 11px;
    left: 11px;
    right: 11px;
    bottom: 11px;
    border-radius: 50%;
    background: #141418;
    transition: background 0.28s ease;}
#landing-magnesio-12en1 .sw-stats__row:hover .sw-stats__ring{transform: scale(1.04);}
#landing-magnesio-12en1 .sw-stats__row:hover .sw-stats__ring::before{background: #17171C;}
#landing-magnesio-12en1 .sw-stats .sw-stats__pct{position: relative;
    z-index: 2;
    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    opacity: 1 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;}
#landing-magnesio-12en1 .sw-stats .sw-stats__text{margin: 0 !important;
    font-size: clamp(15px, 1.4vw, 19px) !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    opacity: 1 !important;
    color: #E2DBD0 !important;
    -webkit-text-fill-color: #E2DBD0 !important;}
@media (prefers-reduced-motion: reduce){
#landing-magnesio-12en1 .sw-stats.sw-js [data-sw-reveal],#landing-magnesio-12en1 .sw-stats.sw-js [data-sw-reveal].is-visible,#landing-magnesio-12en1 .sw-stats.sw-js .sw-stats__row.is-visible .sw-stats__ring{animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;}
#landing-magnesio-12en1 .sw-stats__row:hover,#landing-magnesio-12en1 .sw-stats__row:hover .sw-stats__ring{transform: none !important;}}
@media screen and (max-width: 749px){
#landing-magnesio-12en1 .sw-stats{padding: 24px 18px 26px 18px;
      border-radius: 0px;}
#landing-magnesio-12en1 .sw-stats .sw-stats__note{margin-bottom: 20px !important;
      font-size: 12px !important;}
#landing-magnesio-12en1 .sw-stats__rows{gap: 14px;}
#landing-magnesio-12en1 .sw-stats__row{gap: 16px;
      padding: 16px 16px;
      border-radius: 14px;}
#landing-magnesio-12en1 .sw-stats__ring{width: 84px;
      height: 84px;}
#landing-magnesio-12en1 .sw-stats__ring::before{top: 9px;
      left: 9px;
      right: 9px;
      bottom: 9px;}
#landing-magnesio-12en1 .sw-stats .sw-stats__pct{font-size: 18px !important;}
#landing-magnesio-12en1 .sw-stats .sw-stats__text{font-size: 15px !important;}}
#landing-magnesio-12en1 .sw-formula{margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;
    padding: 26px 34px 46px 34px;
    background: #08080C;
    border-radius: 0px 0px 0px 0px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;}
#landing-magnesio-12en1 .sw-formula *{box-sizing: border-box;}
@keyframes sw-formula-left{
    from { opacity: 0; transform: translateX(-38px); }
    to   { opacity: 1; transform: translateX(0); }
  }
@keyframes sw-formula-right{
    from { opacity: 0; transform: translateX(38px); }
    to   { opacity: 1; transform: translateX(0); }
  }
#landing-magnesio-12en1 .sw-formula.sw-js [data-sw-reveal]{opacity: 0;}
#landing-magnesio-12en1 .sw-formula.sw-js [data-sw-reveal="left"].is-visible{animation: sw-formula-left 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) both;}
#landing-magnesio-12en1 .sw-formula.sw-js [data-sw-reveal="right"].is-visible{animation: sw-formula-right 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) 0.14s both;}
@supports (animation-timeline: view()){
#landing-magnesio-12en1 .sw-formula:not(.sw-js) [data-sw-reveal="left"]{animation: sw-formula-left 1s ease-out both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;}
#landing-magnesio-12en1 .sw-formula:not(.sw-js) [data-sw-reveal="right"]{animation: sw-formula-right 1s ease-out both;
      animation-timeline: view();
      animation-range: entry 12% entry 62%;}}
#landing-magnesio-12en1 .sw-formula__card{display: flex;
    align-items: center;
    gap: 46px;
    padding: 44px;
    border-radius: 28px;
    background: #16130F;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;}
#landing-magnesio-12en1 .sw-formula__card:hover{transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6);}
#landing-magnesio-12en1 .sw-formula__text{flex: 1 1 50%;
    min-width: 0;}
#landing-magnesio-12en1 .sw-formula__text p{margin: 0 !important;
    font-size: clamp(16px, 1.6vw, 22px) !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    color: #C9B78D !important;
    -webkit-text-fill-color: #C9B78D !important;}
#landing-magnesio-12en1 .sw-formula__text strong{font-weight: 700 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;}
#landing-magnesio-12en1 .sw-formula__media{flex: 1 1 50%;
    min-width: 0;
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;}
#landing-magnesio-12en1 .sw-formula__media img{width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-formula__media:hover img{transform: scale(1.04);}
@media (prefers-reduced-motion: reduce){
#landing-magnesio-12en1 .sw-formula [data-sw-reveal],#landing-magnesio-12en1 .sw-formula [data-sw-reveal].is-visible{animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;}
#landing-magnesio-12en1 .sw-formula__card:hover,#landing-magnesio-12en1 .sw-formula__media:hover img{transform: none !important;}}
@media screen and (max-width: 749px){
@keyframes sw-formula-left{
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes sw-formula-right{
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: translateY(0); }
    }
#landing-magnesio-12en1 .sw-formula{padding: 18px 18px 30px 18px;
      border-radius: 0 0 0px 0px;}
#landing-magnesio-12en1 .sw-formula__card{flex-direction: column;
      align-items: stretch;
      gap: 22px;
      padding: 22px;
      border-radius: 18px;}
#landing-magnesio-12en1 .sw-formula__text p{font-size: 16px !important;
      line-height: 1.5 !important;}}
#landing-magnesio-12en1 .sw-mag{margin-top: 24px;
    margin-bottom: 24px;
    width: 100%;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;}
#landing-magnesio-12en1 .sw-mag *{box-sizing: border-box;}
@keyframes sw-mag-left{
    from { opacity: 0; transform: translateX(-34px); }
    to   { opacity: 1; transform: translateX(0); }
  }
@keyframes sw-mag-right{
    from { opacity: 0; transform: translateX(26px); }
    to   { opacity: 1; transform: translateX(0); }
  }
@keyframes sw-mag-up{
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
#landing-magnesio-12en1 .sw-mag.sw-js [data-sw-reveal]{opacity: 0;}
#landing-magnesio-12en1 .sw-mag.sw-js [data-sw-reveal="left"].is-visible{opacity: 1;
    animation: sw-mag-left 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-mag.sw-js [data-sw-reveal="right"].is-visible{opacity: 1;
    animation: sw-mag-right 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-mag.sw-js [data-sw-reveal="up"].is-visible{opacity: 1;
    animation: sw-mag-up 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-forms__card{display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 40px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 26px;
    border-radius: 28px;
    background: #FBF3E3;
    border: 1px solid #F0E3CB;}
#landing-magnesio-12en1 .sw-forms__media{flex: 1 1 320px;
    max-width: 42%;
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;}
#landing-magnesio-12en1 .sw-forms__media img{width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-forms__media:hover img{transform: scale(1.03);}
#landing-magnesio-12en1 .sw-forms__panel{flex: 1 1 380px;
    min-width: 0;
    padding: 12px 14px 12px 0;}
#landing-magnesio-12en1 .sw-mag .sw-forms__title{margin: 0 0 22px 0 !important;
    font-size: 30px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: #241B12 !important;
    -webkit-text-fill-color: #241B12 !important;}
#landing-magnesio-12en1 .sw-forms__item{padding: 0 0 16px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #EDE0C8;}
#landing-magnesio-12en1 .sw-mag .sw-forms__name{display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 7px 0 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #B0821F !important;
    -webkit-text-fill-color: #B0821F !important;}
#landing-magnesio-12en1 .sw-forms__icon{flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;}
#landing-magnesio-12en1 .sw-mag .sw-forms__desc{margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    color: #4B4238 !important;
    -webkit-text-fill-color: #4B4238 !important;}
#landing-magnesio-12en1 .sw-mag .sw-forms__closing{margin: 0 !important;
    padding: 18px 20px;
    border-radius: 14px;
    background: #F6E9CE;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    color: #8A6520 !important;
    -webkit-text-fill-color: #8A6520 !important;}
#landing-magnesio-12en1 .sw-cierre{margin-top: 20px;}
#landing-magnesio-12en1 .sw-cierre__card{position: relative;
    overflow: hidden;
    max-width: 1120px;
    margin: 0 auto;
    padding: 34px 40px 38px 40px;
    border-radius: 22px;
    background: linear-gradient(180deg, #E8C260 0%, #C99A2E 100%);
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;}
#landing-magnesio-12en1 .sw-cierre__card:hover{transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(140, 100, 20, 0.28);}
#landing-magnesio-12en1 .sw-cierre__card::after{content: '';
    position: absolute;
    top: -60%;
    left: -75%;
    width: 45%;
    height: 220%;
    pointer-events: none;
    transform: rotate(18deg) translateX(0);
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.18) 35%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0.18) 65%,
      rgba(255, 255, 255, 0) 100%
    );
    animation: sw-brillo 5s ease-in-out infinite;}
@keyframes sw-brillo{
    0%   { transform: rotate(18deg) translateX(0); }
    22%  { transform: rotate(18deg) translateX(340%); }
    100% { transform: rotate(18deg) translateX(340%); }
  }
#landing-magnesio-12en1 .sw-mag .sw-cierre__title,#landing-magnesio-12en1 .sw-mag .sw-cierre__text{position: relative;
    z-index: 1;}
#landing-magnesio-12en1 .sw-mag .sw-cierre__title{margin: 0 0 16px 0 !important;
    font-size: 27px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: #2A1F0C !important;
    -webkit-text-fill-color: #2A1F0C !important;}
#landing-magnesio-12en1 .sw-mag .sw-cierre__text{max-width: 760px;
    margin: 0 auto !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    color: #3A2C10 !important;
    -webkit-text-fill-color: #3A2C10 !important;}
@media (prefers-reduced-motion: reduce){
#landing-magnesio-12en1 .sw-mag.sw-js [data-sw-reveal],#landing-magnesio-12en1 .sw-mag.sw-js [data-sw-reveal].is-visible{animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;}
#landing-magnesio-12en1 .sw-forms__media:hover img,#landing-magnesio-12en1 .sw-cierre__card:hover{transform: none !important;}
#landing-magnesio-12en1 .sw-cierre__card::after{animation: none !important;
      opacity: 0 !important;}}
@media screen and (max-width: 1100px){
#landing-magnesio-12en1 .sw-mag{padding: 0 20px;}
#landing-magnesio-12en1 .sw-forms__card{gap: 28px;}
#landing-magnesio-12en1 .sw-mag .sw-forms__title{font-size: 26px !important;}}
@media screen and (max-width: 900px){
@keyframes sw-mag-left{
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes sw-mag-right{
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
#landing-magnesio-12en1 .sw-mag{padding: 0 16px;}
#landing-magnesio-12en1 .sw-forms__card{flex-direction: column;
      flex-wrap: nowrap;
      gap: 22px;
      padding: 16px;
      border-radius: 18px;}
#landing-magnesio-12en1 .sw-forms__media{flex: 0 0 auto;
      width: 100%;
      max-width: 100%;
      border-radius: 12px;}
#landing-magnesio-12en1 .sw-forms__media img{height: auto;}
#landing-magnesio-12en1 .sw-forms__panel{flex: 0 0 auto;
      width: 100%;
      padding: 0;}
#landing-magnesio-12en1 .sw-mag .sw-forms__title{font-size: 22px !important;
      margin-bottom: 18px !important;}
#landing-magnesio-12en1 .sw-mag .sw-forms__desc{font-size: 13px !important;}
#landing-magnesio-12en1 .sw-cierre__card{padding: 26px 20px 28px 20px;
      border-radius: 18px;}
#landing-magnesio-12en1 .sw-mag .sw-cierre__title{font-size: 20px !important;
      margin-bottom: 12px !important;}
#landing-magnesio-12en1 .sw-mag .sw-cierre__text{font-size: 14px !important;
      line-height: 1.55 !important;}}
#landing-magnesio-12en1 .sw-clientes{box-sizing: border-box;
    margin-top: 24px;
    margin-bottom: 24px;
    width: 100%;
    padding: 44px 20px 50px 20px;
    background: #E9EFE7;}
#landing-magnesio-12en1 .sw-clientes__inner,#landing-magnesio-12en1 .sw-clientes__heading,#landing-magnesio-12en1 .sw-clientes__grid,#landing-magnesio-12en1 .sw-clientes__card,#landing-magnesio-12en1 .sw-clientes__media,#landing-magnesio-12en1 .sw-clientes__img,#landing-magnesio-12en1 .sw-clientes__body,#landing-magnesio-12en1 .sw-clientes__title,#landing-magnesio-12en1 .sw-clientes__quote,#landing-magnesio-12en1 .sw-clientes__author,#landing-magnesio-12en1 .sw-clientes__garantia,#landing-magnesio-12en1 .sw-clientes__garantia-title,#landing-magnesio-12en1 .sw-clientes__garantia-text{box-sizing: border-box;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;}
#landing-magnesio-12en1 .sw-clientes__inner{max-width: 1120px;
    margin: 0 auto;}
@keyframes sw-clientes-in{
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
#landing-magnesio-12en1 .sw-clientes.sw-clientes-js [data-sw-clientes-reveal]{opacity: 0;}
#landing-magnesio-12en1 .sw-clientes.sw-clientes-js [data-sw-clientes-reveal].is-visible{opacity: 1;
    animation: sw-clientes-in 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__heading{margin: 0 0 30px 0 !important;
    text-align: center;
    font-size: 27px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #1B1B1B !important;
    -webkit-text-fill-color: #1B1B1B !important;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__grid{display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__card{display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #FFFFFF;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__card:hover{transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(30, 45, 30, 0.13);}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__media{flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    line-height: 0;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__img{width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__media:hover .sw-clientes__img{transform: scale(1.04);}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__body{display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 24px 26px 24px;
    text-align: center;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__title{margin: 0 0 12px 0 !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #1B1B1B !important;
    -webkit-text-fill-color: #1B1B1B !important;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__quote{margin: 0 0 18px 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: #5A5A5A !important;
    -webkit-text-fill-color: #5A5A5A !important;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__author{margin: auto 0 0 0 !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    color: #8A8A8A !important;
    -webkit-text-fill-color: #8A8A8A !important;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__garantia{margin-top: 34px;
    text-align: center;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__garantia-title{margin: 0 0 12px 0 !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    color: #1B1B1B !important;
    -webkit-text-fill-color: #1B1B1B !important;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__garantia-text{max-width: 640px;
    margin: 0 auto !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    color: #4A4A4A !important;
    -webkit-text-fill-color: #4A4A4A !important;}
@media (prefers-reduced-motion: reduce){
#landing-magnesio-12en1 .sw-clientes.sw-clientes-js [data-sw-clientes-reveal],#landing-magnesio-12en1 .sw-clientes.sw-clientes-js [data-sw-clientes-reveal].is-visible{animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__card:hover,#landing-magnesio-12en1 .sw-clientes .sw-clientes__media:hover .sw-clientes__img{transform: none !important;}}
@media screen and (max-width: 900px){
#landing-magnesio-12en1 .sw-clientes .sw-clientes__grid{grid-template-columns: repeat(2, 1fr);
      gap: 18px;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__heading{font-size: 23px !important;
      margin-bottom: 24px !important;}}
@media screen and (max-width: 640px){
#landing-magnesio-12en1 .sw-clientes{padding: 32px 16px 36px 16px;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__grid{grid-template-columns: 1fr;
      gap: 16px;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__heading{font-size: 21px !important;
      margin-bottom: 20px !important;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__body{padding: 18px 18px 22px 18px;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__garantia-title{font-size: 17px !important;}
#landing-magnesio-12en1 .sw-clientes .sw-clientes__garantia-text{font-size: 13.5px !important;}}
#landing-magnesio-12en1 .sw-comp{margin-top: 24px;
    margin-bottom: 24px;
    width: 100%;
    padding: 40px 20px;
    background: #000000;
    border-radius: 28px;
    overflow: hidden;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;}
#landing-magnesio-12en1 .sw-comp *{box-sizing: border-box;}
@keyframes sw-comp-left{
    from { opacity: 0; transform: translateX(-34px); }
    to   { opacity: 1; transform: translateX(0); }
  }
@keyframes sw-comp-right{
    from { opacity: 0; transform: translateX(26px); }
    to   { opacity: 1; transform: translateX(0); }
  }
#landing-magnesio-12en1 .sw-comp.sw-js [data-sw-reveal]{opacity: 0;}
#landing-magnesio-12en1 .sw-comp.sw-js [data-sw-reveal="left"].is-visible{opacity: 1;
    animation: sw-comp-left 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-comp.sw-js [data-sw-reveal="right"].is-visible{opacity: 1;
    animation: sw-comp-right 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-comp.sw-js .sw-comp__text.is-visible{animation-delay: 0.12s;}
#landing-magnesio-12en1 .sw-comp__card{display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 26px;
    border-radius: 26px;
    background: #111111;
    border: 1px solid #1E1E1E;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;}
#landing-magnesio-12en1 .sw-comp__card:hover{transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.75);
    border-color: #3A3222;}
#landing-magnesio-12en1 .sw-comp__media{flex: 1 1 340px;
    max-width: 48%;
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;}
#landing-magnesio-12en1 .sw-comp__media img{width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-comp__media:hover img{transform: scale(1.03);}
#landing-magnesio-12en1 .sw-comp__panel{flex: 1 1 360px;
    min-width: 0;
    padding-right: 14px;}
#landing-magnesio-12en1 .sw-comp .sw-comp__title{margin: 0 0 20px 0 !important;
    font-size: 30px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;}
#landing-magnesio-12en1 .sw-comp .sw-comp__text{margin: 0 !important;
    font-size: 15.5px !important;
    line-height: 1.62 !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
    color: #CFCBC4 !important;
    -webkit-text-fill-color: #CFCBC4 !important;}
#landing-magnesio-12en1 .sw-comp .sw-comp__text strong{font-weight: 700 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;}
@media (prefers-reduced-motion: reduce){
#landing-magnesio-12en1 .sw-comp.sw-js [data-sw-reveal],#landing-magnesio-12en1 .sw-comp.sw-js [data-sw-reveal].is-visible{animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;}
#landing-magnesio-12en1 .sw-comp__card:hover,#landing-magnesio-12en1 .sw-comp__media:hover img{transform: none !important;}}
@media screen and (max-width: 900px){
@keyframes sw-comp-left{
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes sw-comp-right{
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
#landing-magnesio-12en1 .sw-comp{padding: 28px 16px;
      border-radius: 20px;}
#landing-magnesio-12en1 .sw-comp__card{flex-direction: column;
      flex-wrap: nowrap;
      gap: 22px;
      padding: 16px;
      border-radius: 18px;}
#landing-magnesio-12en1 .sw-comp__media{flex: 0 0 auto;
      width: 100%;
      max-width: 100%;
      border-radius: 12px;}
#landing-magnesio-12en1 .sw-comp__panel{flex: 0 0 auto;
      width: 100%;
      padding-right: 0;}
#landing-magnesio-12en1 .sw-comp .sw-comp__title{font-size: 22px !important;
      margin-bottom: 14px !important;}
#landing-magnesio-12en1 .sw-comp .sw-comp__text{font-size: 14.5px !important;}}
#landing-magnesio-12en1 .sw-op{box-sizing: border-box;
    margin-top: 24px;
    margin-bottom: 24px;
    width: 100%;
    padding: 44px 20px 40px 20px;
    background: #FFFFFF;}
#landing-magnesio-12en1 .sw-op__inner,#landing-magnesio-12en1 .sw-op__heading,#landing-magnesio-12en1 .sw-op__viewport,#landing-magnesio-12en1 .sw-op__page,#landing-magnesio-12en1 .sw-op__card,#landing-magnesio-12en1 .sw-op__stars,#landing-magnesio-12en1 .sw-op__title,#landing-magnesio-12en1 .sw-op__text,#landing-magnesio-12en1 .sw-op__person,#landing-magnesio-12en1 .sw-op__avatar,#landing-magnesio-12en1 .sw-op__meta,#landing-magnesio-12en1 .sw-op__name,#landing-magnesio-12en1 .sw-op__age,#landing-magnesio-12en1 .sw-op__controls,#landing-magnesio-12en1 .sw-op__arrow,#landing-magnesio-12en1 .sw-op__dots,#landing-magnesio-12en1 .sw-op__pip{box-sizing: border-box;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;}
#landing-magnesio-12en1 .sw-op__inner{max-width: 1240px;
    margin: 0 auto;}
@keyframes sw-op-in{
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
#landing-magnesio-12en1 .sw-op.sw-op-js [data-sw-op-reveal]{opacity: 0;}
#landing-magnesio-12en1 .sw-op.sw-op-js [data-sw-op-reveal].is-visible{opacity: 1;
    animation: sw-op-in 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-op .sw-op__heading{margin: 0 0 30px 0 !important;
    text-align: center;
    font-size: 30px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;}
#landing-magnesio-12en1 .sw-op .sw-op__page{display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
    animation: sw-op-in 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-op .sw-op__page[hidden]{display: none;}
#landing-magnesio-12en1 .sw-op .sw-op__card{display: flex;
    flex-direction: column;
    height: 100%;
    padding: 26px 28px 24px 28px;
    border-radius: 14px;
    background: #E8EEE5;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;}
#landing-magnesio-12en1 .sw-op .sw-op__card:hover{transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(30, 45, 30, 0.14);}
#landing-magnesio-12en1 .sw-op .sw-op__stars{margin: 0 0 14px 0 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: 3px !important;
    color: #F5B301 !important;
    -webkit-text-fill-color: #F5B301 !important;}
#landing-magnesio-12en1 .sw-op .sw-op__title{margin: 0 0 12px 0 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;}
#landing-magnesio-12en1 .sw-op .sw-op__text{margin: 0 0 24px 0 !important;
    font-size: 14px !important;
    line-height: 1.62 !important;
    font-weight: 400 !important;
    color: #4A4A4A !important;
    -webkit-text-fill-color: #4A4A4A !important;}
#landing-magnesio-12en1 .sw-op .sw-op__person{display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;}
#landing-magnesio-12en1 .sw-op .sw-op__avatar{flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: block;}
#landing-magnesio-12en1 .sw-op .sw-op__name{margin: 0 0 2px 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;}
#landing-magnesio-12en1 .sw-op .sw-op__age{margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    color: #8A8A8A !important;
    -webkit-text-fill-color: #8A8A8A !important;}
#landing-magnesio-12en1 .sw-op .sw-op__controls{display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 30px;}
#landing-magnesio-12en1 .sw-op .sw-op__arrow{display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    background: #FFFFFF;
    cursor: pointer;
    color: #555555;
    transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;}
#landing-magnesio-12en1 .sw-op .sw-op__arrow svg{width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;}
#landing-magnesio-12en1 .sw-op .sw-op__arrow:hover{border-color: #999999;
    color: #111111;
    transform: scale(1.08);}
#landing-magnesio-12en1 .sw-op .sw-op__arrow:active{transform: scale(0.94);}
#landing-magnesio-12en1 .sw-op .sw-op__dots{display: inline-flex;
    align-items: center;
    gap: 8px;}
#landing-magnesio-12en1 .sw-op .sw-op__pip{width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #D6D6D6;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;}
#landing-magnesio-12en1 .sw-op .sw-op__pip:hover{background: #A0A0A0;}
#landing-magnesio-12en1 .sw-op .sw-op__pip.is-active{background: #1B1B1B;
    transform: scale(1.15);}
@media (prefers-reduced-motion: reduce){
#landing-magnesio-12en1 .sw-op.sw-op-js [data-sw-op-reveal],#landing-magnesio-12en1 .sw-op.sw-op-js [data-sw-op-reveal].is-visible,#landing-magnesio-12en1 .sw-op .sw-op__page{animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;}
#landing-magnesio-12en1 .sw-op .sw-op__card:hover,#landing-magnesio-12en1 .sw-op .sw-op__arrow:hover,#landing-magnesio-12en1 .sw-op .sw-op__pip.is-active{transform: none !important;}}
@media screen and (max-width: 980px){
#landing-magnesio-12en1 .sw-op .sw-op__page{grid-template-columns: repeat(2, 1fr);
      gap: 18px;}
#landing-magnesio-12en1 .sw-op .sw-op__heading{font-size: 25px !important;}}
@media screen and (max-width: 640px){
#landing-magnesio-12en1 .sw-op{padding: 32px 16px 30px 16px;}
#landing-magnesio-12en1 .sw-op .sw-op__page{grid-template-columns: 1fr;
      gap: 16px;}
#landing-magnesio-12en1 .sw-op .sw-op__heading{font-size: 22px !important;
      margin-bottom: 22px !important;}
#landing-magnesio-12en1 .sw-op .sw-op__card{padding: 20px 20px 18px 20px;}
#landing-magnesio-12en1 .sw-op .sw-op__controls{margin-top: 24px;}}
#landing-magnesio-12en1 .sw-fb{box-sizing: border-box;
    margin-top: 24px;
    margin-bottom: 24px;
    width: 100%;
    padding: 44px 20px 40px 20px;
    background: #000000;}
#landing-magnesio-12en1 .sw-fb__inner,#landing-magnesio-12en1 .sw-fb__badge,#landing-magnesio-12en1 .sw-fb__badge-icon,#landing-magnesio-12en1 .sw-fb__heading,#landing-magnesio-12en1 .sw-fb__accent,#landing-magnesio-12en1 .sw-fb__sub,#landing-magnesio-12en1 .sw-fb__carousel,#landing-magnesio-12en1 .sw-fb__viewport,#landing-magnesio-12en1 .sw-fb__slide,#landing-magnesio-12en1 .sw-fb__img,#landing-magnesio-12en1 .sw-fb__arrow,#landing-magnesio-12en1 .sw-fb__dots,#landing-magnesio-12en1 .sw-fb__pip,#landing-magnesio-12en1 .sw-fb__foot,#landing-magnesio-12en1 .sw-fb__foot-stars{box-sizing: border-box;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;}
#landing-magnesio-12en1 .sw-fb__inner{max-width: 1120px;
    margin: 0 auto;
    text-align: center;}
@keyframes sw-fb-in{
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
#landing-magnesio-12en1 .sw-fb.sw-fb-js [data-sw-fb-reveal]{opacity: 0;}
#landing-magnesio-12en1 .sw-fb.sw-fb-js [data-sw-fb-reveal].is-visible{opacity: 1;
    animation: sw-fb-in 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-fb .sw-fb__badge{display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px 8px 10px;
    border-radius: 999px;
    background: #111111;
    border: 1px solid #222222;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;}
#landing-magnesio-12en1 .sw-fb .sw-fb__badge-icon{display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1877F2;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;}
#landing-magnesio-12en1 .sw-fb .sw-fb__heading{margin: 20px 0 12px 0 !important;
    font-size: 32px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;}
#landing-magnesio-12en1 .sw-fb .sw-fb__accent{color: #E7C56A !important;
    -webkit-text-fill-color: #E7C56A !important;}
#landing-magnesio-12en1 .sw-fb .sw-fb__sub{max-width: 560px;
    margin: 0 auto 34px auto !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    color: #B9B9B9 !important;
    -webkit-text-fill-color: #B9B9B9 !important;}
#landing-magnesio-12en1 .sw-fb .sw-fb__carousel{position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;}
#landing-magnesio-12en1 .sw-fb .sw-fb__viewport{flex: 1 1 auto;
    max-width: 760px;
    min-width: 0;}
#landing-magnesio-12en1 .sw-fb .sw-fb__slide{animation: sw-fb-in 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-fb .sw-fb__slide[hidden]{display: none;}
#landing-magnesio-12en1 .sw-fb .sw-fb__img{width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;}
#landing-magnesio-12en1 .sw-fb .sw-fb__arrow{flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #2A2A2A;
    border-radius: 50%;
    background: #141414;
    cursor: pointer;
    color: #DDDDDD;
    transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;}
#landing-magnesio-12en1 .sw-fb .sw-fb__arrow svg{width: 17px;
    height: 17px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;}
#landing-magnesio-12en1 .sw-fb .sw-fb__arrow:hover{border-color: #6A5B33;
    color: #E7C56A;
    transform: scale(1.08);}
#landing-magnesio-12en1 .sw-fb .sw-fb__arrow:active{transform: scale(0.94);}
#landing-magnesio-12en1 .sw-fb .sw-fb__dots{display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;}
#landing-magnesio-12en1 .sw-fb .sw-fb__pip{width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #3A3A3A;
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;}
#landing-magnesio-12en1 .sw-fb .sw-fb__pip:hover{background: #6A6A6A;}
#landing-magnesio-12en1 .sw-fb .sw-fb__pip.is-active{width: 22px;
    background: #E7C56A;}
#landing-magnesio-12en1 .sw-fb .sw-fb__foot{margin: 26px 0 0 0 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #E7C56A !important;
    -webkit-text-fill-color: #E7C56A !important;}
#landing-magnesio-12en1 .sw-fb .sw-fb__foot-stars{margin-right: 7px;
    letter-spacing: 1px;}
@media (prefers-reduced-motion: reduce){
#landing-magnesio-12en1 .sw-fb.sw-fb-js [data-sw-fb-reveal],#landing-magnesio-12en1 .sw-fb.sw-fb-js [data-sw-fb-reveal].is-visible,#landing-magnesio-12en1 .sw-fb .sw-fb__slide{animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;}
#landing-magnesio-12en1 .sw-fb .sw-fb__arrow:hover{transform: none !important;}}
@media screen and (max-width: 749px){
#landing-magnesio-12en1 .sw-fb{padding: 32px 16px 30px 16px;}
#landing-magnesio-12en1 .sw-fb .sw-fb__heading{font-size: 23px !important;}
#landing-magnesio-12en1 .sw-fb .sw-fb__sub{margin-bottom: 24px !important;
      font-size: 13px !important;}
#landing-magnesio-12en1 .sw-fb .sw-fb__carousel{gap: 0;}
#landing-magnesio-12en1 .sw-fb .sw-fb__arrow{position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 34px;
      height: 34px;
      z-index: 2;
      background: rgba(20, 20, 20, 0.85);}
#landing-magnesio-12en1 .sw-fb .sw-fb__arrow--prev{left: -4px;}
#landing-magnesio-12en1 .sw-fb .sw-fb__arrow--next{right: -4px;}
#landing-magnesio-12en1 .sw-fb .sw-fb__arrow:hover,#landing-magnesio-12en1 .sw-fb .sw-fb__arrow:active{transform: translateY(-50%);}
#landing-magnesio-12en1 .sw-fb .sw-fb__dots{margin-top: 22px;}}
#landing-magnesio-12en1 .sw-wa{box-sizing: border-box;
    margin-top: 24px;
    margin-bottom: 24px;
    width: 100%;
    padding: 40px 20px 44px 20px;
    background: #FFFFFF;}
#landing-magnesio-12en1 .sw-wa__inner,#landing-magnesio-12en1 .sw-wa__intro,#landing-magnesio-12en1 .sw-wa__scroller,#landing-magnesio-12en1 .sw-wa__item,#landing-magnesio-12en1 .sw-wa__img,#landing-magnesio-12en1 .sw-wa__cta,#landing-magnesio-12en1 .sw-wa__cta-title,#landing-magnesio-12en1 .sw-wa__cta-text{box-sizing: border-box;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;}
#landing-magnesio-12en1 .sw-wa__inner{max-width: 1120px;
    margin: 0 auto;
    text-align: center;}
@keyframes sw-wa-in{
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
#landing-magnesio-12en1 .sw-wa.sw-wa-js [data-sw-wa-reveal]{opacity: 0;}
#landing-magnesio-12en1 .sw-wa.sw-wa-js [data-sw-wa-reveal].is-visible{opacity: 1;
    animation: sw-wa-in 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-wa .sw-wa__intro{max-width: 460px;
    margin: 0 auto 28px auto !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    color: #3E3223 !important;
    -webkit-text-fill-color: #3E3223 !important;}
#landing-magnesio-12en1 .sw-wa .sw-wa__scroller{display: flex;
    gap: 18px;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: none;}
#landing-magnesio-12en1 .sw-wa .sw-wa__scroller::-webkit-scrollbar{display: none;}
#landing-magnesio-12en1 .sw-wa .sw-wa__item{flex: 0 0 auto;
    width: 300px;
    scroll-snap-align: center;
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;}
#landing-magnesio-12en1 .sw-wa .sw-wa__item:hover{transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);}
#landing-magnesio-12en1 .sw-wa .sw-wa__img{width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;}
#landing-magnesio-12en1 .sw-wa .sw-wa__cta{margin-top: 40px;
    padding: 30px 26px;
    border: 1px solid #EFEBE3;
    border-radius: 16px;
    background: #FBFAF7;}
#landing-magnesio-12en1 .sw-wa .sw-wa__cta-title{margin: 0 0 10px 0 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;}
#landing-magnesio-12en1 .sw-wa .sw-wa__cta-text{max-width: 460px;
    margin: 0 auto !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
    color: #6B5B45 !important;
    -webkit-text-fill-color: #6B5B45 !important;}
@media (prefers-reduced-motion: reduce){
#landing-magnesio-12en1 .sw-wa.sw-wa-js [data-sw-wa-reveal],#landing-magnesio-12en1 .sw-wa.sw-wa-js [data-sw-wa-reveal].is-visible{animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;}
#landing-magnesio-12en1 .sw-wa .sw-wa__scroller{scroll-behavior: auto;}
#landing-magnesio-12en1 .sw-wa .sw-wa__item:hover{transform: none !important;}}
@media screen and (min-width: 1000px){
#landing-magnesio-12en1 .sw-wa .sw-wa__scroller{justify-content: center;}
#landing-magnesio-12en1 .sw-wa .sw-wa__item{width: 320px;}}
@media screen and (max-width: 640px){
#landing-magnesio-12en1 .sw-wa{padding: 30px 16px 34px 16px;}
#landing-magnesio-12en1 .sw-wa .sw-wa__intro{font-size: 13.5px !important;
      margin-bottom: 22px !important;}
#landing-magnesio-12en1 .sw-wa .sw-wa__item{width: 258px;}
#landing-magnesio-12en1 .sw-wa .sw-wa__cta{margin-top: 30px;
      padding: 24px 18px;}
#landing-magnesio-12en1 .sw-wa .sw-wa__cta-title{font-size: 18px !important;}}
#landing-magnesio-12en1 .sw-preg{box-sizing: border-box;
    margin-top: 24px;
    margin-bottom: 24px;
    width: 100%;
    padding: 44px 20px 50px 20px;
    background: #FFFFFF;}
#landing-magnesio-12en1 .sw-preg__inner,#landing-magnesio-12en1 .sw-preg__kicker,#landing-magnesio-12en1 .sw-preg__heading,#landing-magnesio-12en1 .sw-preg__list,#landing-magnesio-12en1 .sw-preg__item,#landing-magnesio-12en1 .sw-preg__head,#landing-magnesio-12en1 .sw-preg__icon,#landing-magnesio-12en1 .sw-preg__q,#landing-magnesio-12en1 .sw-preg__chev,#landing-magnesio-12en1 .sw-preg__panel,#landing-magnesio-12en1 .sw-preg__clip,#landing-magnesio-12en1 .sw-preg__a{box-sizing: border-box;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;}
#landing-magnesio-12en1 .sw-preg__inner{max-width: 800px;
    margin: 0 auto;}
#landing-magnesio-12en1 .sw-preg .sw-preg__kicker{margin: 0 0 8px 0 !important;
    text-align: center;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    color: #8A8A8A !important;
    -webkit-text-fill-color: #8A8A8A !important;}
#landing-magnesio-12en1 .sw-preg .sw-preg__heading{margin: 0 0 34px 0 !important;
    text-align: center;
    font-size: 38px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;}
#landing-magnesio-12en1 .sw-preg .sw-preg__item{border-top: 1px solid #E8E8E8;}
#landing-magnesio-12en1 .sw-preg .sw-preg__item:last-child{border-bottom: 1px solid #E8E8E8;}
#landing-magnesio-12en1 .sw-preg .sw-preg__head{display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 19px 4px;
    cursor: pointer;
    list-style: none;
    transition: opacity 0.2s ease;}
#landing-magnesio-12en1 .sw-preg .sw-preg__head::-webkit-details-marker{display: none;}
#landing-magnesio-12en1 .sw-preg .sw-preg__head::marker{content: '';}
#landing-magnesio-12en1 .sw-preg .sw-preg__head:hover{opacity: 0.65;}
#landing-magnesio-12en1 .sw-preg .sw-preg__icon{flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid #A8A8A8;
    border-radius: 50%;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #6E6E6E !important;
    -webkit-text-fill-color: #6E6E6E !important;}
#landing-magnesio-12en1 .sw-preg .sw-preg__q{flex: 1 1 auto;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;}
#landing-magnesio-12en1 .sw-preg .sw-preg__chev{flex: 0 0 auto;
    line-height: 0;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-preg .sw-preg__chev svg{width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: #6E6E6E;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;}
#landing-magnesio-12en1 .sw-preg .sw-preg__item[open] .sw-preg__chev{transform: rotate(180deg);}
#landing-magnesio-12en1 .sw-preg .sw-preg__panel{display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.38s cubic-bezier(0.2, 0.7, 0.3, 1);}
#landing-magnesio-12en1 .sw-preg .sw-preg__item[open] .sw-preg__panel{grid-template-rows: 1fr;}
#landing-magnesio-12en1 .sw-preg .sw-preg__clip{overflow: hidden;}
#landing-magnesio-12en1 .sw-preg .sw-preg__a{padding: 0 4px 22px 4px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease 0.06s, transform 0.3s ease 0.06s;}
#landing-magnesio-12en1 .sw-preg .sw-preg__item[open] .sw-preg__a{opacity: 1;
    transform: translateY(0);}
#landing-magnesio-12en1 .sw-preg .sw-preg__a p{margin: 0 !important;
    font-size: 15.5px !important;
    line-height: 1.62 !important;
    font-weight: 400 !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;}
#landing-magnesio-12en1 .sw-preg .sw-preg__a strong{font-weight: 700 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;}
@media (prefers-reduced-motion: reduce){
#landing-magnesio-12en1 .sw-preg .sw-preg__panel,#landing-magnesio-12en1 .sw-preg .sw-preg__chev,#landing-magnesio-12en1 .sw-preg .sw-preg__a{transition: none !important;}}
@media screen and (max-width: 749px){
#landing-magnesio-12en1 .sw-preg{padding: 32px 16px 36px 16px;}
#landing-magnesio-12en1 .sw-preg .sw-preg__heading{font-size: 27px !important;
      margin-bottom: 24px !important;}
#landing-magnesio-12en1 .sw-preg .sw-preg__head{padding: 16px 2px;
      gap: 10px;}
#landing-magnesio-12en1 .sw-preg .sw-preg__q{font-size: 14px !important;}
#landing-magnesio-12en1 .sw-preg .sw-preg__a{padding: 0 2px 18px 2px;}
#landing-magnesio-12en1 .sw-preg .sw-preg__a p{font-size: 14.5px !important;
      line-height: 1.58 !important;}}

/* MODO OSCURO FORZADO: Chrome y Samsung Internet en Android invierten
   por su cuenta los fondos claros de cualquier pagina que no declare que
   es clara. Eso dejaba el bloque de compra en negro con el texto en
   blanco, aunque el CSS diga crema. Declarando el esquema, el navegador
   deja de tocarla y se ve con los colores de la marca. */
:root{color-scheme:light !important}
#landing-magnesio-12en1, #landing-magnesio-12en1 *{color-scheme:light}

/* Los tonos de marca, como variables. Sin esto var(--boton-hondo) no existia
   en ninguna parte y la pildora del descuento de la banda de arriba quedaba
   con texto blanco sobre fondo blanco: se veia un rectangulo vacio.
   Los dos hex se sustituyen mas abajo por los del proyecto. */
#landing-magnesio-12en1{--boton:#111111; --boton-hondo:#000000}

#landing-magnesio-12en1{margin:0 auto; background:#FFFFFF}
#landing-magnesio-12en1 .lienzo{max-width:100%; background:#FFFFFF}

/* Las secciones del tema traen su propio fondo blanco y por eso se
   marcaba el corte de cada imagen. Aqui les damos el crema de la
   marca, que es el color al que van a morir los degradados. */
[id^="shopify-section-"][id*="__np_"]{
  background:#FFFFFF !important;
  padding:0 !important;
  margin:0 !important;
}

/* Costuras mas generosas: la imagen se funde por arriba y por abajo,
   no solo por abajo. Asi no se ve donde empieza y donde termina. */
/* Difuminacion entre secciones: bandas mas anchas pero con CURVA
   SUAVE (varios pasos), asi el fundido es profundo sin tapar el
   texto que las imagenes traen pegado al borde. La opacidad cae
   rapido: a 20px del borde ya casi no cubre nada. */
#landing-magnesio-12en1 .costura{height:52px; margin-top:-52px}
#landing-magnesio-12en1 .bloque{position:relative}
#landing-magnesio-12en1 .bloque::before{
  content:''; position:absolute; left:0; right:0; top:0; height:44px;
  z-index:2; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.55) 30%,
    rgba(255,255,255,.18) 60%,
    rgba(255,255,255,0) 100%);
}
/* El fundido superior se apaga SOLO en el hero (#arriba, arriba del todo).
   Antes se usaba :first-of-type, pero como la landing se parte en dos
   secciones, la primera imagen de contenido (np_abajo) tambien era
   first-of-type y perdia el fundido -> borde duro. Ahora esa SI se difumina. */
#landing-magnesio-12en1 #arriba::before{display:none}
#landing-magnesio-12en1 .bloque:first-of-type:not(#arriba)::before{display:block}
#landing-magnesio-12en1 .bloque::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:52px;
  z-index:2; pointer-events:none;
  background:linear-gradient(to top,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.55) 30%,
    rgba(255,255,255,.18) 60%,
    rgba(255,255,255,0) 100%);
}

/* La barra flotante nuestra sobra: la unica que queda es la de
   Releasit, que es la que de verdad abre el formulario. */
#landing-magnesio-12en1 .barra, .barra{display:none !important}
#landing-magnesio-12en1{padding-bottom:0}

/* BLINDAJE: la landing NO se muestra en computador (mouse = PC/laptop).
   Se oculta al instante, sin parpadeo. El telefono (tactil) no se toca.
   El JS complementa esto para las extensiones que fingen movil.

   El :not(.np-movil) es por Clarity. Clarity no guarda un video: guarda el
   HTML y lo vuelve a pintar dentro de un iframe EN NUESTRO PC. Como la
   regla de abajo es una media query, se evaluaba de nuevo al reproducir,
   contra el mouse de quien mira la grabacion -> tapaba la landing entera y
   la grabacion salia en blanco (solo se veia el boton de Releasit, que es
   lo unico que vive fuera de #landing-magnesio-12en1). La clase np-movil se la pone el
   JS al celular de verdad, queda grabada en el HTML, y al reproducir manda
   la clase y no el mouse del que mira. */
@media (hover:hover) and (pointer:fine){
  html:not(.np-dueno):not(.np-movil) #landing-magnesio-12en1{display:none !important}
}
/* En PC, cuando el dueño des-oculta la landing, las secciones .revela deben
   verse SIN depender del JS de reveal (que en PC no dispara bien). */
@media (hover:hover) and (pointer:fine){
  #landing-magnesio-12en1 .revela{opacity:1 !important; transform:none !important; filter:none !important}
}
/* En PC el tema Horizon encierra la pagina: a partir de 990px pone
     html:has(.page-wrapper), html:has(.page-wrapper) body { height:100dvh; overflow:hidden }
   y hace el scroll por dentro de .page-wrapper. Con la landing abierta eso
   dejaba la pagina trabada en la primera pantalla: no bajaba, y como las
   fotos son lazy nunca entraban en vista -> nunca cargaban -> las secciones
   quedaban en alto 0 (se veia solo el hero). Cuando el dueño abre la landing
   le devolvemos el scroll normal a la pagina. */
html.np-dueno,
html.np-dueno body,
html.np-dueno .page-wrapper{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

/* La tira de fotos y las fajas, sobre el fondo de la landing.

   Va con var(--fondo, ...) y no con el color pelado a proposito: este
   bloque se pega DESPUES del CSS del proyecto, asi que un color fijo
   aqui le ganaba a cualquier seccion que quisiera otro fondo. Una
   landing que alterna secciones claras y oscuras solo tiene que
   redefinir --fondo en la seccion; el respaldo se usa cuando la
   landing no declara el token. */
#landing-magnesio-12en1 .tira, #landing-magnesio-12en1 .faja{background:var(--fondo,#FFFFFF)}
#np-comprar{scroll-margin-top:90px; display:block; height:0}
#landing-magnesio-12en1 .np-respiro{height:80px}

#landing-magnesio-12en1 .np-variantes{padding-top:22px; padding-bottom:28px}
#landing-magnesio-12en1 .np-opcion{margin-bottom:20px}

/* insignia de viral: una sola linea, logos reales, sin quiebres.
   Los colores NO son suyos: los toma de las variables de cada
   landing (superficie, borde, tinta), asi combina con cualquier
   sistema, claro u oscuro. */
#landing-magnesio-12en1 .np-viral{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:nowrap; white-space:nowrap; gap:8px;
  width:fit-content; max-width:100%;
  margin:0 auto 14px; padding:8px 16px; border-radius:999px;
  background:var(--superficie, #fff);
  border:1px solid var(--borde, rgba(0,0,0,.15));
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:13px; color:var(--tinta, #222);
}
#landing-magnesio-12en1 .np-viral__fuego{font-size:14px; line-height:1}
#landing-magnesio-12en1 .np-viral__texto{
  font-weight:600; opacity:.85; letter-spacing:.02em;
}
#landing-magnesio-12en1 .np-viral__red{
  display:inline-flex; align-items:center; gap:5px;
  font-weight:800; letter-spacing:.01em;
}
#landing-magnesio-12en1 .np-viral__red + .np-viral__red{
  margin-left:2px; padding-left:10px;
  border-left:1px solid var(--borde, rgba(0,0,0,.18));
}
#landing-magnesio-12en1 .np-viral__red svg{display:block; flex:0 0 auto}

@media (max-width:380px){
  #landing-magnesio-12en1 .np-viral{font-size:12px; padding:7px 12px; gap:6px}
}

/* estrellas + ventas, arriba del precio.
   Las estrellas van en DORADO, no en el color del boton: en las landings
   de fondo oscuro y boton rojo se perdian contra el fondo y ensuciaban.
   El dorado es color de estrella en todos lados y sube el nivel. */
#landing-magnesio-12en1 .np-social{
  display:flex; align-items:center; gap:8px; margin:0; min-width:0;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
}
#landing-magnesio-12en1 .np-estrellas{
  color:#F0B429; font-size:13px; letter-spacing:1px; line-height:1;
  white-space:nowrap; flex:0 0 auto;   /* nunca se parten en dos renglones */
}
#landing-magnesio-12en1 .np-social__texto{
  font-size:12.5px; color:var(--tinta-suave); letter-spacing:.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#landing-magnesio-12en1 .np-social__texto b{color:var(--tinta); font-weight:800}
#landing-magnesio-12en1 .np-opcion__nombre{
  display:block; margin-bottom:8px;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--oro);
}
/* --- color: cuadritos con el tono real --- */
#landing-magnesio-12en1 .np-muestras{display:flex; gap:14px; flex-wrap:wrap}
#landing-magnesio-12en1 .np-muestra{
  position:relative; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
#landing-magnesio-12en1 .np-muestra input{position:absolute; opacity:0; pointer-events:none}
#landing-magnesio-12en1 .np-muestra__tono{
  display:block; width:58px; height:58px; border-radius:14px;
  border:2px solid var(--borde,rgba(46,52,64,.12));
  box-shadow:inset 0 -8px 14px rgba(0,0,0,.10), 0 3px 10px rgba(46,52,64,.10);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  background:#D9D9D9;
}
#landing-magnesio-12en1 .np-muestra__nombre{
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:12.5px; font-style:normal; color:var(--tinta-suave);
  transition:color .18s ease, font-weight .18s ease;
}
#landing-magnesio-12en1 .np-muestra input:checked + .np-muestra__tono{
  border-color:var(--boton); transform:scale(1.06);
  box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--boton), inset 0 -8px 14px rgba(0,0,0,.10);
}
#landing-magnesio-12en1 .np-muestra input:checked ~ .np-muestra__nombre{
  color:var(--tinta); font-weight:700;
}
#landing-magnesio-12en1 .np-muestra__tono[data-tono="palo-de-rosa"]{background:#C18B87}
#landing-magnesio-12en1 .np-muestra__tono[data-tono="azul"]{background:#5D7091}
#landing-magnesio-12en1 .np-muestra__tono[data-tono="crema"]{background:#EDE2CE}
#landing-magnesio-12en1 .np-muestra__tono[data-tono="gris"]{background:#5E5E5E}
#landing-magnesio-12en1 .np-muestra__tono[data-tono="cafe"]{background:#B5722F}
#landing-magnesio-12en1 .np-muestra__tono[data-tono="blanco"]{background:#F6F4EF}
#landing-magnesio-12en1 .np-muestra__tono[data-tono="rojo"]{background:#B8272E}
#landing-magnesio-12en1 .np-muestra__tono[data-tono="negro"]{background:#1C1C1C}
#landing-magnesio-12en1 .np-muestra__tono[data-tono="beige"]{background:#D9C7A7}
#landing-magnesio-12en1 .np-muestra__tono[data-tono="miel"]{background:#C68A3F}
#landing-magnesio-12en1 .np-muestra__tono[data-tono="rosado"]{background:#E8A2B8}
#landing-magnesio-12en1 .np-muestra__tono[data-tono="verde"]{background:#4E7A44}
#landing-magnesio-12en1 .np-muestra__tono[data-tono="vinotinto"]{background:#6E1F2C}

/* --- talla: selector de borde a borde --- */
#landing-magnesio-12en1 .np-tallas{
  display:grid; gap:0; width:100%;
  border:1.5px solid var(--borde,#D5DCE4); border-radius:14px;
  overflow:hidden; background:var(--superficie,#fff);
  align-items:stretch;
}
#landing-magnesio-12en1 .np-talla{position:relative; cursor:pointer; display:flex}
#landing-magnesio-12en1 .np-talla input{position:absolute; opacity:0; pointer-events:none}
#landing-magnesio-12en1 .np-talla + .np-talla span{border-left:1.5px solid var(--borde,#D5DCE4)}
#landing-magnesio-12en1 .np-talla span{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:56px; padding:12px 10px; text-align:center;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15.5px; font-weight:700; color:var(--tinta);
  line-height:1.25; hyphens:none; word-break:normal;
  transition:background .18s ease, color .18s ease;
}
#landing-magnesio-12en1 .np-talla input:checked + span{
  background:var(--boton); color:#fff; border-left-color:var(--boton);
}
#landing-magnesio-12en1 .np-talla input:disabled + span{
  opacity:.32; text-decoration:line-through; cursor:not-allowed;
}
/* Nombre del producto, justo encima del precio. Hereda la tipografia de
   titulares de cada landing (la serif en las que la usan), para que no
   se vea como un texto pegado sino como parte del diseno. */
/* Nombre del producto. Hereda la tipografia de titulares de la landing
   (la serif donde la haya) para que se lea como parte del diseno y no
   como un texto del sistema pegado encima del precio. */
/* Dos renglones: arriba nombre + precio, abajo estrellas + tachado. */
#landing-magnesio-12en1 .np-cabecera{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin:0 0 4px;
}
#landing-magnesio-12en1 .np-cabecera--sec{
  align-items:center; margin:0 0 16px;
}
#landing-magnesio-12en1 .np-titulo{
  /* cada landing puede fijar --fuente-titulo en su :root; si no la define,
     se queda con la del sistema como hasta ahora */
  font-family:var(--fuente-titulo, system-ui,-apple-system,'Segoe UI',sans-serif);
  font-size:clamp(21px,5.8vw,27px); line-height:1.1; font-weight:800;
  color:var(--tinta); letter-spacing:-.015em; margin:0;
  text-transform:none; flex:1 1 auto; min-width:0;
}
/* PRECIO: el ancla de la pagina. Se le da aire y una jerarquia clara:
   el "antes" chiquito y apagado arriba, el precio grande solo, y el
   descuento como una ficha discreta al lado. Antes iban los tres al
   mismo nivel peleandose. */
/* El precio, pegado a la derecha: el numero grande arriba y debajo, en
   una sola linea, el tachado y el descuento. */
#landing-magnesio-12en1 .np-precio{
  flex:0 0 auto; margin:0; padding:0;
  display:flex; align-items:center; justify-content:flex-end;
  gap:8px; max-width:100%;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* el precio vive en el primer renglon, al frente del nombre */
#landing-magnesio-12en1 .np-precio__ahora{
  flex:0 0 auto; text-align:right; white-space:nowrap;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(28px,7.8vw,36px); font-weight:900;
  color:var(--tinta); letter-spacing:-.028em; line-height:1;
}
#landing-magnesio-12en1 .np-precio__antes{
  font-size:13.5px; color:var(--tinta-suave);
  text-decoration:line-through; text-decoration-thickness:1px; opacity:.75;
}
/* La ficha del descuento va RELLENA: en contorno se perdia contra el
   fondo oscuro. Rellena se ve de una y sigue siendo chica. */
#landing-magnesio-12en1 .np-precio__ahorro{
  align-self:center;
  background:var(--boton); color:#fff;
  padding:3.5px 10px; border-radius:8px;
  font-size:12.5px; font-weight:900; letter-spacing:.02em;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}

/* la seccion de compra fija su padding horizontal para poder sangrar la banda */
#landing-magnesio-12en1 .np-variantes{padding-left:22px; padding-right:22px}

/* CONTADOR STICKY: barra de oferta que sigue toda la landing */
#landing-magnesio-12en1 .np-cuenta__hueco{height:48px}
#landing-magnesio-12en1 .np-cuenta{
  position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:9500;
  width:100%; max-width:560px; height:48px; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 13px;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 45%),
    linear-gradient(90deg, #111111 0%, #000000 100%);
  color:#fff; font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  box-shadow:0 4px 20px rgba(0,0,0,.24);
  border-bottom:1px solid rgba(255,255,255,.18);
}
/* brillo que barre la banda */
#landing-magnesio-12en1 .np-cuenta::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.30) 50%, transparent 66%);
  transform:translateX(-120%); animation:np-brillo 5.5s ease-in-out infinite;
}
@keyframes np-brillo{ 0%,55%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }
@media (prefers-reduced-motion:reduce){ #landing-magnesio-12en1 .np-cuenta::after{animation:none; display:none} }

/* zona izquierda: la oferta */
#landing-magnesio-12en1 .np-cuenta__deal{display:inline-flex; align-items:center; gap:8px; position:relative; z-index:1; min-width:0}
#landing-magnesio-12en1 .np-cuenta__rayo{
  width:23px; height:23px; flex:0 0 auto; padding:4px; border-radius:50%;
  background:rgba(255,255,255,.18); filter:drop-shadow(0 1px 1px rgba(0,0,0,.2));
}
#landing-magnesio-12en1 .np-cuenta__precio{display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap; flex:0 0 auto}
#landing-magnesio-12en1 .np-cuenta__antes{font-size:11px; opacity:.72; text-decoration:line-through}
#landing-magnesio-12en1 .np-cuenta__ahora{font-size:15.5px; font-weight:900; letter-spacing:-.02em}
#landing-magnesio-12en1 .np-cuenta__desc{
  background:var(--superficie,#fff); color:var(--boton-hondo);
  padding:3px 8px; border-radius:7px; font-weight:900; font-size:13px; line-height:1.1;
  letter-spacing:-.02em; box-shadow:0 2px 7px rgba(0,0,0,.22); flex:0 0 auto;
}
#landing-magnesio-12en1 .np-cuenta__envio{
  font-weight:800; font-size:11px; line-height:1.1; text-transform:uppercase;
  letter-spacing:.02em; white-space:nowrap;
}
#landing-magnesio-12en1 .np-cuenta__envio b{color:#FFE9B0; font-weight:900}
/* segunda linea: dice que la oferta no se repite, no solo que hay reloj */
#landing-magnesio-12en1 .np-cuenta__envio em{
  display:block; font-style:normal; font-size:8.5px; font-weight:700;
  opacity:.82; letter-spacing:.06em;
}
/* zona derecha: el cronometro en fichas */
#landing-magnesio-12en1 .np-cuenta__timer{display:inline-flex; align-items:center; gap:4px; position:relative; z-index:1; flex:0 0 auto}
#landing-magnesio-12en1 .np-cuenta__reloj-ico{width:15px; height:15px; opacity:.85; margin-right:2px}
/* "Termina en" al lado del reloj: sin esto el cronometro no decia de que */
#landing-magnesio-12en1 .np-cuenta__termina{
  font-size:8.5px; font-weight:800; line-height:1.05; text-transform:uppercase;
  letter-spacing:.04em; opacity:.9; text-align:right; margin-right:4px;
}
#landing-magnesio-12en1 .np-cuenta__tile{
  background:rgba(0,0,0,.32); color:#fff; font-weight:900; font-size:15.5px; line-height:1;
  font-variant-numeric:tabular-nums; padding:6px 6px; border-radius:6px; min-width:28px; text-align:center;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16);
}
#landing-magnesio-12en1 .np-cuenta__colon{font-weight:900; font-size:15px; opacity:.9; animation:np-parpadeo 1s step-end infinite}
@keyframes np-parpadeo{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){#landing-magnesio-12en1 .np-cuenta__colon{animation:none}}
/* en celular sobra el tachado (el -32% ya dice el descuento): se oculta
   para que "Envío GRATIS" y el reloj nunca se monten. Solo vuelve en anchos. */
@media (max-width:479px){ #landing-magnesio-12en1 .np-cuenta__antes{display:none} }
@media (max-width:369px){ #landing-magnesio-12en1 .np-cuenta__envio{display:none} }

/* BANDA DE URGENCIA a todo el ancho. Va separada del precio: antes
   quedaba pegada debajo y los dos bloques se leian como uno solo. */
#landing-magnesio-12en1 .np-urgencia{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:6px -22px 20px; padding:11px 16px;
  background:linear-gradient(90deg,
    rgba(17,17,17,.08) 0%, rgba(17,17,17,.16) 50%, rgba(17,17,17,.08) 100%);
  border-top:1px solid rgba(17,17,17,.20);
  border-bottom:1px solid rgba(17,17,17,.20);
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:13px; color:var(--tinta); text-align:center;
}
/* el numero de gente viendo va en BLANCO: en el color de marca se perdia
   contra la banda, que ya es de ese mismo tono */
#landing-magnesio-12en1 .np-urgencia b{color:var(--tinta); font-weight:900}
/* el monito toma el color del texto: claro en landing oscura, oscuro
   en landing clara. Con el rojo de marca se perdia sobre el vino. */
#landing-magnesio-12en1 .np-gente{width:18px; height:18px; color:var(--tinta); flex:0 0 auto}
#landing-magnesio-12en1 .np-vivo{
  width:9px; height:9px; border-radius:50%; background:#2ECC40; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(46,204,64,.55);
  animation:np-vivo-pulso 1.7s ease-out infinite;
}
@keyframes np-vivo-pulso{
  0%{box-shadow:0 0 0 0 rgba(46,204,64,.55)}
  70%{box-shadow:0 0 0 9px rgba(46,204,64,0)}
  100%{box-shadow:0 0 0 0 rgba(46,204,64,0)}
}
@media (prefers-reduced-motion:reduce){ #landing-magnesio-12en1 .np-vivo{animation:none} }
#landing-magnesio-12en1 .np-lote{margin:14px auto 0; max-width:360px; text-align:center}
#landing-magnesio-12en1 .np-stock{
  height:4px; border-radius:999px; margin:0 0 7px;
  background:var(--borde,var(--borde,#D5DCE4)); overflow:hidden;
}
#landing-magnesio-12en1 .np-stock__fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, #111111, #000000);
  transition:width 1.1s cubic-bezier(.22,.61,.36,1);
}
/* AVISO DE LOTE: tiene que verse. El numero baja solo mientras el
   cliente lee, en una caja que no se puede pasar por alto. */
#landing-magnesio-12en1 .np-stock__aviso{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin:0 auto; padding:7px 14px; border-radius:999px;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(100deg, rgba(17,17,17,.24) 0%, rgba(17,17,17,.08) 100%);
  border:1.5px solid rgba(17,17,17,.45);
  box-shadow:0 6px 20px rgba(0,0,0,.16);
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* un brillo cruza la caja cada tanto: la hace mirar sin gritar */
#landing-magnesio-12en1 .np-stock__aviso::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,.22) 50%, transparent 64%);
  transform:translateX(-120%); animation:np-brillo-stock 6s ease-in-out infinite;
}
@keyframes np-brillo-stock{ 0%,58%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }
@media (prefers-reduced-motion:reduce){ #landing-magnesio-12en1 .np-stock__aviso::after{display:none} }
/* el numero va en su propia ficha roja: se lee de lejos */
#landing-magnesio-12en1 .np-stock__num{
  flex:0 0 auto; min-width:28px; height:auto; padding:2px 8px;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px; position:relative; z-index:1;
  background:linear-gradient(135deg, var(--boton) 0%, var(--boton-hondo) 100%);
  color:#fff; font-size:15px; font-weight:800; line-height:1.3;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  box-shadow:0 5px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);
}
#landing-magnesio-12en1 .np-stock__cuerpo{
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; min-width:0;
  position:relative; z-index:1;
}
#landing-magnesio-12en1 .np-stock__txt{
  font-size:11.5px; font-weight:600; color:var(--tinta); line-height:1.3;
}
#landing-magnesio-12en1 .np-stock__baja{
  font-size:10.5px; font-weight:600; color:var(--boton);
  opacity:0; transition:opacity .35s ease;
}
#landing-magnesio-12en1 .np-stock__baja.visible{opacity:1}
#landing-magnesio-12en1 .np-stock__baja::before{content:'● '; font-size:8px; vertical-align:middle}

/* RESUMEN DE CALIFICACION: siempre en la seccion de reseñas.

   La tarjeta se pinta sobre una superficie CLARA. En una landing oscura el
   --tinta de la pagina es casi blanco, y el "4.8" y los porcentajes salian
   blancos sobre blanco: se veia una tarjeta vacia con dos barras rojas
   flotando. Por eso declara aqui sus propios tonos de texto y deja de
   depender de los de la pagina. Si una landing quiere la tarjeta oscura,
   redefine --superficie Y estos dos. */
#landing-magnesio-12en1 .np-rating{
  --tinta:#16181C; --tinta-suave:#6B7280;
  background:var(--superficie,#fff); border:1px solid var(--borde,var(--borde,#D5DCE4));
  border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.07);
  padding:18px 18px 15px; margin:0 auto 18px; max-width:440px; text-align:left;
}
#landing-magnesio-12en1 .np-rating__score{display:flex; align-items:center; gap:13px; margin-bottom:14px}
#landing-magnesio-12en1 .np-rating__score > b{font-size:44px; font-weight:900; line-height:.85; letter-spacing:-.03em; color:var(--tinta)}
#landing-magnesio-12en1 .np-rating__stars{color:#F5A623; font-size:16px; letter-spacing:2px}
#landing-magnesio-12en1 .np-rating__base{display:block; font-size:11.5px; color:var(--tinta-suave); margin-top:4px}
#landing-magnesio-12en1 .np-rating__bars{display:grid; gap:6px}
#landing-magnesio-12en1 .np-rating__row{display:grid; grid-template-columns:28px 1fr 36px; align-items:center; gap:9px; font-size:11px; color:var(--tinta-suave)}
#landing-magnesio-12en1 .np-rating__lbl{color:var(--tinta); font-weight:700; white-space:nowrap}
/* Las barras: riel parejo y relleno con un minimo de ancho. Sin el minimo,
   la fila del 1% dibujaba una raya de dos pixeles que parecia un error. */
#landing-magnesio-12en1 .np-rating__track{height:7px; border-radius:999px; background:rgba(22,24,28,.10); overflow:hidden}
#landing-magnesio-12en1 .np-rating__track b{display:block; height:100%; min-width:0; border-radius:999px; background:var(--boton)}
#landing-magnesio-12en1 .np-rating__track b[style="width:0%"]{background:transparent}
#landing-magnesio-12en1 .np-rating__row em{text-align:right; font-variant-numeric:tabular-nums; font-style:normal}
#landing-magnesio-12en1 .np-rating__hi{
  margin-top:14px; display:flex; align-items:center; gap:11px;
  background:rgba(17,17,17,.07); border:1px solid rgba(17,17,17,.18);
  border-radius:12px; padding:11px 13px; font-size:13px; color:var(--tinta);
  text-align:left; line-height:1.3;
}
#landing-magnesio-12en1 .np-rating__hi-ico{
  width:27px; height:27px; border-radius:50%; background:var(--boton); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 7px rgba(17,17,17,.35);
}
#landing-magnesio-12en1 .np-rating__hi-ico svg{width:15px; height:15px; stroke:#fff; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
#landing-magnesio-12en1 .np-rating__hi b{color:var(--boton-hondo); font-weight:800}
#landing-magnesio-12en1 .np-rating__hi .pct{font-size:16px; font-weight:900}

/* precio por pack dentro del selector: que se vea que el pack es negocio */
#landing-magnesio-12en1 .np-talla span{flex-direction:column; gap:3px}
#landing-magnesio-12en1 .np-talla__precio{
  font-size:12.5px; font-weight:800; opacity:.85; letter-spacing:-.01em;
}
#landing-magnesio-12en1 .np-talla__unidad{
  font-size:10px; font-weight:600; opacity:.6;
}

/* ============================================================
   BUNDLES QUE SE VEN
   ------------------------------------------------------------
   El pack deja de ser un recuadrito de texto: cada opcion es una
   tarjeta con la foto real de ESE pack (uno, dos o tres botes),
   su precio, lo que sale la unidad y el ahorro. La elegida se
   marca con el color de la marca y un check.
   ============================================================ */
/* los packs plegados: se ve el elegido, el resto se abre al tocar */
#landing-magnesio-12en1 .np-packs-fold{
  border:1.5px solid var(--borde,rgba(0,0,0,.16)); border-radius:16px;
  background:var(--superficie,#fff); overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,.07);
}
#landing-magnesio-12en1 .np-packs-fold__resumen{
  list-style:none; cursor:pointer; padding:13px 15px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
}
#landing-magnesio-12en1 .np-packs-fold__resumen::-webkit-details-marker{display:none}
#landing-magnesio-12en1 .np-packs-fold__izq{display:flex; align-items:center; gap:11px; min-width:0}
#landing-magnesio-12en1 .np-packs-fold__foto{
  flex:0 0 auto; width:46px; height:46px; border-radius:10px; overflow:hidden;
  background:rgba(127,127,127,.10); display:flex; align-items:center; justify-content:center;
}
#landing-magnesio-12en1 .np-packs-fold__foto img{width:100%; height:100%; object-fit:cover; display:block}
#landing-magnesio-12en1 .np-packs-fold__txt{display:flex; flex-direction:column; gap:2px; min-width:0}
#landing-magnesio-12en1 .np-packs-fold__elegido{
  font-size:15.5px; font-weight:800; color:var(--tinta); line-height:1.2;
}
#landing-magnesio-12en1 .np-packs-fold__elegido b{color:var(--boton)}
/* solo el triangulo, grandecito: el "Cambiar" sobraba */
#landing-magnesio-12en1 .np-packs-fold__cambiar{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; color:var(--boton);
}
#landing-magnesio-12en1 .np-packs-fold__cambiar::after{content:'▾'; font-size:22px; line-height:1}
#landing-magnesio-12en1 .np-packs-fold[open] .np-packs-fold__cambiar::after{content:'▴'}

/* el texto del resumen NUNCA cambia de color: ni al tocar, ni abierto.
   El tema le metia su color de hover al summary y se veia negro. */
#landing-magnesio-12en1 .np-packs-fold__resumen,
#landing-magnesio-12en1 .np-packs-fold__resumen:hover,
#landing-magnesio-12en1 .np-packs-fold__resumen:active,
#landing-magnesio-12en1 .np-packs-fold[open] .np-packs-fold__resumen{
  color:var(--tinta) !important; background:transparent !important;
}
#landing-magnesio-12en1 .np-packs-fold__elegido,
#landing-magnesio-12en1 .np-packs-fold__resumen:hover .np-packs-fold__elegido,
#landing-magnesio-12en1 .np-packs-fold__resumen:active .np-packs-fold__elegido{
  color:var(--tinta) !important;
}

/* insignia "Mas elegido" tambien en el resumen plegado */
#landing-magnesio-12en1 .np-packs-fold__mini-cinta{
  display:inline-block; margin-left:7px; padding:2px 8px; border-radius:999px;
  background:var(--boton); color:#fff; vertical-align:middle;
  font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
}
#landing-magnesio-12en1 .np-packs-fold[open] .np-packs-fold__resumen{
  border-bottom:1px solid var(--borde,rgba(0,0,0,.12));
}
#landing-magnesio-12en1 .np-packs-fold .np-packs{padding:12px 12px 14px}

/* Tarjetas de pack COMPACTAS: con tres ofertas a la vista ocupaban
   media pantalla y empujaban el boton fuera de vista. Se achico la foto,
   el relleno y el espacio entre tarjetas, sin tocar los tamanos de
   precio (que son los que tienen que leerse de lejos). */
#landing-magnesio-12en1 .np-packs{display:grid; gap:8px}
#landing-magnesio-12en1 .np-pack{position:relative; cursor:pointer; display:block}
#landing-magnesio-12en1 .np-pack input{position:absolute; opacity:0; pointer-events:none}
#landing-magnesio-12en1 .np-pack__caja{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:8px 12px 8px 8px; border-radius:13px;
  background:var(--superficie,#fff);
  border:2px solid var(--borde,rgba(0,0,0,.14));
  box-shadow:0 4px 16px rgba(0,0,0,.10);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#landing-magnesio-12en1 .np-pack__foto{
  flex:0 0 auto; width:62px; height:62px; border-radius:10px;
  overflow:hidden; background:rgba(127,127,127,.10);
  display:flex; align-items:center; justify-content:center;
}
#landing-magnesio-12en1 .np-pack__foto img{
  width:100%; height:100%; object-fit:cover; display:block;
}
#landing-magnesio-12en1 .np-pack__cuerpo{
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif; text-align:left;
}
#landing-magnesio-12en1 .np-pack__nombre{
  font-size:14px; font-weight:800; color:var(--tinta); letter-spacing:-.01em;
  line-height:1.15;
}
#landing-magnesio-12en1 .np-pack__precios{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
#landing-magnesio-12en1 .np-pack__ahora{
  font-size:18px; font-weight:900; color:var(--tinta); letter-spacing:-.02em;
}
#landing-magnesio-12en1 .np-pack__antes{
  font-size:11.5px; color:var(--tinta-suave); text-decoration:line-through;
}
#landing-magnesio-12en1 .np-pack__unidad{
  font-size:11.5px; font-weight:700; color:var(--boton);
}
/* Oferta unica: no hay nada que elegir, asi que la ficha no se comporta
   como boton (ni cursor de mano, ni levantarse al estar "elegida"). */
#landing-magnesio-12en1 .np-pack--solo{cursor:default}
#landing-magnesio-12en1 .np-pack--solo .np-pack__caja{
  border-color:var(--boton);
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  transform:none !important;
}
/* sello de envio gratis dentro de la tarjeta de oferta */
#landing-magnesio-12en1 .np-pack__envio{
  display:inline-flex; align-items:center; gap:4px; align-self:flex-start;
  margin-top:2px; padding:2px 8px 2px 6px; border-radius:999px;
  background:rgba(46,160,90,.12); color:#1E7A45;
  font-size:10.5px; font-weight:800; letter-spacing:.01em; line-height:1.25;
}
#landing-magnesio-12en1 .np-pack__envio svg{
  width:14px; height:14px; flex:0 0 auto;
  stroke:#1E7A45; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
#landing-magnesio-12en1 .np-pack__envio svg circle{fill:#1E7A45; stroke:none}

/* Regalo que solo trae ese pack (por ejemplo las membresias que vienen con
   el de dos unidades). Sale del metacampo custom.regalo de la variante, asi
   que cada producto pone el suyo y ninguno lo inventa. */
#landing-magnesio-12en1 .np-pack__regalo{
  display:inline-flex; align-items:center; gap:4px; align-self:flex-start;
  margin-top:3px; padding:2px 8px 2px 6px; border-radius:999px;
  background:rgba(214,158,46,.14); color:#B7791F;
  font-size:10.5px; font-weight:800; letter-spacing:.01em; line-height:1.25;
}
#landing-magnesio-12en1 .np-pack__regalo svg{
  width:13px; height:13px; flex:0 0 auto;
  stroke:#B7791F; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

/* El formulario de pedido va SIN selector de cantidad: la cantidad la
   define el pack que eligio arriba. Dejar el +/- confundia y permitia
   pedir cantidades que no cuadran con la oferta mostrada. */
#landing-magnesio-12en1 .np-cantidad,
#landing-magnesio-12en1 quantity-selector,
#landing-magnesio-12en1 .quantity,
#landing-magnesio-12en1 .quantity__input,
#landing-magnesio-12en1 .product-form__quantity,
#landing-magnesio-12en1 [class*="quantity-selector"],
#landing-magnesio-12en1 [class*="qty-selector"]{display:none !important}
/* OJO: antes aqui se escondia TODO lo que tuviera "quantity" dentro del
   formulario de Releasit, para matar el +/-. El problema es que la
   TARJETA DE OFERTA de Releasit se llama rsi-quantity-product (y sus
   partes rsi-quantity-title / -price / -plaque): caian en la misma red y
   la oferta desaparecia del formulario. Ahora no se esconde nada de ahi:
   se ve la tarjeta de oferta con su precio tachado y sus insignias, y el
   cliente puede ver la cantidad (1) y cambiarla si quiere. */
/* el circulo que marca cual esta elegido */
#landing-magnesio-12en1 .np-pack__marca{
  flex:0 0 auto; width:23px; height:23px; border-radius:50%;
  border:2px solid var(--borde,rgba(0,0,0,.22)); position:relative;
  transition:border-color .18s ease, background .18s ease;
}
#landing-magnesio-12en1 .np-pack input:checked + .np-pack__caja{
  border-color:var(--boton);
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  transform:translateY(-1px);
}
#landing-magnesio-12en1 .np-pack input:checked + .np-pack__caja .np-pack__marca{
  background:var(--boton); border-color:var(--boton);
}
#landing-magnesio-12en1 .np-pack input:checked + .np-pack__caja .np-pack__marca::after{
  content:''; position:absolute; left:7px; top:3px;
  width:5px; height:10px; border:solid #fff; border-width:0 2.4px 2.4px 0;
  transform:rotate(45deg);
}
/* cinta del pack recomendado */
#landing-magnesio-12en1 .np-pack__cinta{
  position:absolute; top:-10px; right:12px; z-index:2;
  background:var(--boton); color:#fff;
  padding:3px 11px; border-radius:999px;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
}
/* Cinta de urgencia (ultimo pack): opcional, solo si el proyecto la pide.
   Va del MISMO color de marca que la de "Mas elegido": antes iba en rojo
   fijo y en las landings rosadas/doradas chocaba, se veian dos rojos
   distintos peleando en la misma pantalla. */
#landing-magnesio-12en1 .np-pack__cinta--urgente{
  background:var(--boton);
}
@media (max-width:360px){
  #landing-magnesio-12en1 .np-pack__foto{width:70px; height:70px}
  #landing-magnesio-12en1 .np-pack__nombre{font-size:14.5px}
  #landing-magnesio-12en1 .np-pack__ahora{font-size:17.5px}
}

/* estrella "vacia" para las reseñas que no son 5 perfectas */
#landing-magnesio-12en1 [class$="__estrellas"] .v{opacity:.30}
#landing-magnesio-12en1 [class$="__fecha"]{
  color:var(--tinta-suave); font-size:11px; margin-top:-2px; margin-bottom:7px;
}

/* barra de compra fija: sigue al cliente con precio + boton */
/* El 29% de los que tocan el boton lo tocan DOS Y TRES VECES seguidas, con
   0 segundos entre toque y toque: tocan, no ven ninguna respuesta y vuelven
   a tocar. Cada toque de mas cuenta como un pago iniciado, y el que repite
   casi nunca compra. Aqui el boton contesta al dedo al instante. */
#landing-magnesio-12en1 a.boton[data-abriendo],
#landing-magnesio-12en1 .np-barra a[data-abriendo],
#landing-magnesio-12en1 .np-barra button[data-abriendo]{
  pointer-events:none; opacity:.72; position:relative}
#landing-magnesio-12en1 a.boton[data-abriendo]::after,
#landing-magnesio-12en1 .np-barra a[data-abriendo]::after,
#landing-magnesio-12en1 .np-barra button[data-abriendo]::after{
  content:''; position:absolute; right:16px; top:50%; margin-top:-9px;
  width:18px; height:18px; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:npGira .7s linear infinite}
@keyframes npGira{to{transform:rotate(360deg)}}

#landing-magnesio-12en1 .np-barra{
  position:fixed; left:50%; bottom:0; z-index:9000;
  transform:translateX(-50%) translateY(125%);
  width:100%; max-width:560px;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--superficie,#fff);
  border-top:1px solid var(--borde,var(--borde,#D5DCE4));
  box-shadow:0 -8px 26px rgba(0,0,0,.14);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
#landing-magnesio-12en1 .np-barra.visible{transform:translateX(-50%) translateY(0)}
#landing-magnesio-12en1 .np-barra__precio{line-height:1.12; flex:0 0 auto}
#landing-magnesio-12en1 .np-barra__antes{
  display:block; font-size:11px; color:var(--tinta-suave); text-decoration:line-through;
}
#landing-magnesio-12en1 .np-barra__ahora{display:block; font-size:18px; font-weight:900; color:var(--tinta)}
#landing-magnesio-12en1 .np-barra__cta{
  flex:1; text-align:center; text-decoration:none;
  padding:14px 16px; border-radius:999px;
  color:#fff !important; font-weight:800; font-size:15.5px; line-height:1.2;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  background:linear-gradient(135deg, #111111 0%, #000000 100%);
  box-shadow:0 8px 20px rgba(17,17,17,.42);
}
#landing-magnesio-12en1 .np-agotado{
  display:none; margin-top:12px; padding:10px 14px; border-radius:10px;
  background:#FDECEC; color:#A32B2B; border:1px solid #F2C2C2;
  font-family:system-ui,sans-serif; font-size:13.5px;
}
#landing-magnesio-12en1 .np-agotado.visible{display:block}

/* ============================================================
   NUESTRO BOTON, QUE ES EL DE RELEASIT
   ------------------------------------------------------------
   Va dentro de un formulario de producto real, que es lo que
   Releasit busca para engancharse. No hay seccion de informacion
   de producto en ninguna parte.
   ============================================================ */
#landing-magnesio-12en1 #np-form{margin-top:18px}

/* ------------------------------------------------------------
   UN SOLO BOTON.
   El nuestro existe solo para que Releasit se enganche: queda
   plegado, sin ocupar espacio. El que ve el cliente es el de
   Releasit, vestido con nuestro estilo (.np-boton-real, que le
   pone el JavaScript en cuanto la app lo dibuja).
   ------------------------------------------------------------ */
/* El nuestro queda PLEGADO (sr-only): existe solo para que Releasit se
   enganche. El que ve y toca el cliente es el de Releasit (.np-boton-real),
   que abre el popup COD. Igual que en las demas landings que funcionan. */
#landing-magnesio-12en1 #np-boton{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important;
}
#landing-magnesio-12en1 #np-boton.oculto{display:none !important}

/* mas esbelto: antes iba con 19px de relleno y se veia gordo */
#landing-magnesio-12en1 .np-boton-real,
#landing-magnesio-12en1 .np-boton-real button{
  display:block !important;
  width:100% !important; max-width:100% !important;
  margin:0 auto !important; padding:13px 20px !important;
  border:0 !important; border-radius:999px !important; cursor:pointer !important;
  background:linear-gradient(135deg, #111111 0%, #000000 100%) !important;
  color:#fff !important; text-align:center !important;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif !important;
  font-size:16.5px !important; font-weight:800 !important;
  letter-spacing:.01em !important; text-transform:none !important;
  line-height:1.3 !important;
  box-shadow:0 8px 20px rgba(17,17,17,.32) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
  animation:np-latido 2.6s ease-in-out infinite;
}
/* el subtexto del boton ("Envio gratis - Pagas al recibir") mas chico */
#landing-magnesio-12en1 .np-boton-real small,
#landing-magnesio-12en1 .np-boton-real span:not(:first-child){
  font-size:12px !important; font-weight:500 !important; opacity:.85 !important;
}
#landing-magnesio-12en1 .np-boton-real:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 14px 32px rgba(17,17,17,.46) !important;
}
#landing-magnesio-12en1 .np-boton-real:active{transform:translateY(0) !important}
#landing-magnesio-12en1 .np-boton-real *{
  color:#fff !important; background:none !important;
  font-family:inherit !important;
}

/* Releasit a veces pega un icono de carrito junto al boton: fuera,
   tanto si quedo dentro de la pastilla como si quedo de hermano suelto. */
#landing-magnesio-12en1 .np-boton-real svg, #landing-magnesio-12en1 .np-boton-real img, #landing-magnesio-12en1 .np-boton-real i,
#landing-magnesio-12en1 :has(> .np-boton-real) > svg, #landing-magnesio-12en1 :has(> .np-boton-real) > img, #landing-magnesio-12en1 :has(> .np-boton-real) > i{
  display:none !important;
}

@keyframes np-latido{
  0%,100%{box-shadow:0 10px 26px rgba(17,17,17,.36)}
  50%{box-shadow:0 10px 34px rgba(17,17,17,.58)}
}
@media (prefers-reduced-motion:reduce){
  #landing-magnesio-12en1 .np-boton-real{animation:none}
}

/* Red de seguridad: si por lo que sea quedara una seccion de
   informacion de producto del tema, no se ve. En plantillas JSON
   el id real es shopify-section-template--XXXX__main, no
   shopify-section-main. Por eso el selector va por el final. */
[id^="shopify-section-"][id$="__main"],
[id^="shopify-section-"][id$="__related-products"]{display:none !important}

/* Cabecera y pie DEL TEMA fuera: la landing es de venta directa y el
   menu, el buscador y el carrito del tema solo son fugas de conversion.
   Se apunta a los grupos de seccion de Shopify (header-group /
   footer-group), nunca a nuestro <footer>, que vive dentro del lienzo. */
.shopify-section-group-header-group,
.shopify-section-group-footer-group,
[id^="shopify-section-sections--"]{display:none !important}