/** Shopify CDN: Minification failed

Line 7:23 Unexpected "@import"

**/

#landing-champu-romero @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');


:root{--papel:#FFFFFF;
  --boton:#1F3A2C;
  --boton-hondo:#12251B;
  --tinta:#1A1A1A;
  --ancho:560px;}
#landing-champu-romero *{box-sizing:border-box}
#landing-champu-romero .lienzo{max-width:var(--ancho); margin:0 auto; background:var(--papel);
  color:var(--tinta); overflow:hidden;
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}
#landing-champu-romero .lienzo :where(img,#landing-champu-romero video){display:block; max-width:100%; height:auto}
#landing-champu-romero .np-cuenta__hueco{display:block !important; height:48px !important}
#landing-champu-romero .galeria{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
#landing-champu-romero .galeria::-webkit-scrollbar{display:none}
#landing-champu-romero .galeria figure{flex:0 0 100%; scroll-snap-align:center; margin:0}
#landing-champu-romero .puntos{display:flex; justify-content:center; gap:6px; padding:12px 0 2px}
#landing-champu-romero .puntos i{width:6px; height:6px; border-radius:50%; background:#D4D4D4; transition:background .2s}
#landing-champu-romero .puntos i.on{background:#1A1A1A}
#landing-champu-romero .titulo{margin:6px 15px 0; font-size:23px; font-weight:700; line-height:1.2}
#landing-champu-romero .qb{display:grid; gap:10px; margin:16px 15px 0}
#landing-champu-romero .qb__op{position:relative; border:2px solid rgba(18,18,18,.3); border-radius:10px;
  background:rgba(18,18,18,.02); cursor:pointer}
#landing-champu-romero .qb__op--sel{border-color:#121212; background:rgba(18,18,18,.1)}
#landing-champu-romero .qb__badge{position:absolute; top:-10px; left:16px; padding:2px 10px; border-radius:999px;
  background:#121212; color:#fff; font-size:11px; font-weight:700; letter-spacing:.04em}
#landing-champu-romero .qb__in{display:flex; align-items:center; justify-content:space-between; padding:17px}
#landing-champu-romero .qb__lab{font-size:16px; line-height:16px}
#landing-champu-romero .qb__pr{display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right}
#landing-champu-romero .qb__pr em{font-style:italic; font-size:16px; line-height:16px}
#landing-champu-romero .qb__ta{font-size:14px; line-height:14px; color:#6A6A6A; text-decoration:line-through}
#landing-champu-romero .np-cabecera,#landing-champu-romero .np-urgencia,#landing-champu-romero .np-cuenta__envio,#landing-champu-romero .np-lote,#landing-champu-romero .np-stock__aviso,#landing-champu-romero .boton__nota{display:none !important}
#landing-champu-romero .np-cabecera__antes,#landing-champu-romero .np-precio__antes{display:none !important}
#landing-champu-romero .np-variantes input[type="radio"]{position:absolute !important; width:1px !important; height:1px !important;
  opacity:0 !important; pointer-events:none !important}
#landing-champu-romero .cl-orelvie-benefits-container{--cl-brand-dark: #1A1A1A;
      --cl-brand-muted: #4A4A4A;
      --cl-badge-bg: #E8EFEA;
      --cl-badge-text: #2A4035;
      --cl-accent-green: #2A4035;
      --cl-divider-color: #EAEAEA;
      --cl-font-size-base: 13.5px;}
#landing-champu-romero .cl-orelvie-benefits-container{max-width: 550px;
      width: 100%;
      margin: 8px 0;
      padding: 0;
      font-family: 'Montserrat', sans-serif;
      box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;}
#landing-champu-romero .cl-orelvie-benefits-container *,#landing-champu-romero .cl-orelvie-benefits-container *::before,#landing-champu-romero .cl-orelvie-benefits-container *::after{box-sizing: border-box;
      margin: 0;
      padding: 0;}
#landing-champu-romero .cl-orelvie-benefits-badges{display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 8px;}
#landing-champu-romero .cl-orelvie-benefits-badge{display: inline-flex;
      align-items: center;
      background-color: var(--cl-badge-bg);
      color: var(--cl-badge-text);
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      line-height: 1;
      white-space: nowrap;}
#landing-champu-romero .cl-orelvie-benefits-divider{height: 1px;
      width: 100%;
      background-color: var(--cl-divider-color);
      border: none;
      margin: 0 0 8px 0;}
#landing-champu-romero .cl-orelvie-benefits-list{display: flex;
      flex-direction: column;
      gap: 6px;}
#landing-champu-romero .cl-orelvie-benefits-item{display: flex;
      align-items: flex-start;
      gap: 8px;
      color: var(--cl-brand-muted);
      font-size: var(--cl-font-size-base);
      line-height: 1.25;
      transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
      opacity: 0;
      transform: translateY(6px);
      animation: clFadeInSlideCompact 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
      will-change: transform, opacity;}
#landing-champu-romero .cl-orelvie-benefits-item:hover{transform: translateX(3px);}
#landing-champu-romero .cl-orelvie-benefits-item strong{color: var(--cl-brand-dark);
      font-weight: 600;}
#landing-champu-romero .cl-orelvie-benefits-icon{flex-shrink: 0;
      width: 14px;
      height: 14px;
      color: var(--cl-accent-green);
      margin-top: 1px;}
#landing-champu-romero .cl-orelvie-benefits-item:nth-child(1){animation-delay: 0.05s;}
#landing-champu-romero .cl-orelvie-benefits-item:nth-child(2){animation-delay: 0.10s;}
#landing-champu-romero .cl-orelvie-benefits-item:nth-child(3){animation-delay: 0.15s;}
#landing-champu-romero .cl-orelvie-benefits-item:nth-child(4){animation-delay: 0.20s;}
#landing-champu-romero .cl-orelvie-benefits-item:nth-child(5){animation-delay: 0.25s;}
@keyframes clFadeInSlideCompact{
      0% {
        opacity: 0;
        transform: translateY(6px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
@media (prefers-reduced-motion: reduce){
#landing-champu-romero .cl-orelvie-benefits-item{animation: none;
        opacity: 1;
        transform: none;}
#landing-champu-romero .cl-orelvie-benefits-item:hover{transform: none;}}
#landing-champu-romero .section-template--30775334011225__main-padding{padding-top: 0px;
      padding-bottom: 0px;}
@media screen and (min-width: 750px){
#landing-champu-romero .section-template--30775334011225__main-padding{padding-top: 36px;
        padding-bottom: 68px;}}
#landing-champu-romero #MediaGallery-template--30775334011225__main,#landing-champu-romero #MediaGallery-template--30775334011225__main-duplicate{--desktop-thumbnails: 5;
      --desktop-vertical-thumbnails-width: 16%;
      --mobile-thumbnails: 3;
      --mobile-vertical-thumbnails-width: 10%;}
@media screen and (max-width: 749px){
#landing-champu-romero #MediaGallery-template--30775334011225__main,#landing-champu-romero #MediaGallery-template--30775334011225__main-duplicate{--media-radius: 0px;
        --grid-mobile-horizontal-spacing: 0px;
        --mobile-scroll-padding: calc(0% + 0px);
        --slide-container-percentage-width: 100%;
        --slide-inner-percentage-width: 100%;}}
#landing-champu-romero .cl-orelvie-urgency-wrapper{--cl-urg-accent:       #2A4035;
    --cl-urg-accent-tint:  #E8EFEA;
    --cl-urg-accent-border: rgba(42, 64, 53, 0.30);
    --cl-urg-gold:         #D4AF37;
    --cl-urg-text:         #1A1A1A;
    --cl-urg-link:         #6B6B6B;
    --cl-urg-link-hover:   #1A1A1A;
    --cl-urg-divider:      #D4D4D4;}
#landing-champu-romero{scroll-behavior: smooth;}
#landing-champu-romero .cl-orelvie-urgency-wrapper{display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 14px 0 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    color: var(--cl-urg-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;}
#landing-champu-romero .cl-orelvie-urgency-badge{display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 7px 14px;
    border: 1px solid var(--cl-urg-accent-border);
    border-radius: 5px;
    background: var(--cl-urg-accent-tint);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--cl-urg-accent);
    text-transform: uppercase;
    line-height: 1.25;
    white-space: nowrap;
    animation: cl-orelvie-urgency-pulse 3s ease-in-out infinite;
    will-change: transform, opacity;
    transform: translateZ(0);}
#landing-champu-romero .cl-orelvie-urgency-social-proof{display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.45;}
#landing-champu-romero .cl-orelvie-urgency-stars{display: inline-flex;
    align-items: center;
    gap: 1.5px;
    color: var(--cl-urg-gold);
    flex-shrink: 0;
    line-height: 0;}
#landing-champu-romero .cl-orelvie-urgency-stars svg{width: 14px;
    height: 14px;
    display: block;}
#landing-champu-romero .cl-orelvie-urgency-rating{font-weight: 700;
    font-size: 13.5px;
    color: var(--cl-urg-text);
    letter-spacing: 0.01em;}
#landing-champu-romero .cl-orelvie-urgency-divider{color: var(--cl-urg-divider);
    font-weight: 300;
    margin: 0 1px;
    user-select: none;
    line-height: 1;}
#landing-champu-romero .cl-orelvie-urgency-link{color: var(--cl-urg-link);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 400;
    position: relative;
    padding-bottom: 1px;
    cursor: pointer;
    transition: color 0.3s ease;}
#landing-champu-romero .cl-orelvie-urgency-link::after{content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: var(--cl-urg-link-hover);
    transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), left 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
#landing-champu-romero .cl-orelvie-urgency-link:hover{color: var(--cl-urg-link-hover);}
#landing-champu-romero .cl-orelvie-urgency-link:hover::after{width: 100%;
    left: 0;}
#landing-champu-romero .cl-orelvie-urgency-link:focus-visible{outline: 2px solid var(--cl-urg-accent);
    outline-offset: 4px;
    border-radius: 2px;}
@keyframes cl-orelvie-urgency-pulse{
    0%, 100% {
      opacity: 1;
      transform: scale(1) translateZ(0);
    }
    50% {
      opacity: 0.87;
      transform: scale(1.018) translateZ(0);
    }
  }
@media (prefers-reduced-motion: reduce){
#landing-champu-romero .cl-orelvie-urgency-badge{animation: none !important;}
#landing-champu-romero .cl-orelvie-urgency-link::after{transition: none;}
#landing-champu-romero{scroll-behavior: auto;}}
@media (min-width: 768px){
#landing-champu-romero .cl-orelvie-urgency-wrapper{margin-top: 16px;}
#landing-champu-romero .cl-orelvie-urgency-badge{font-size: 13px;
      letter-spacing: 0.08em;
      padding: 7px 18px;}
#landing-champu-romero .cl-orelvie-urgency-social-proof{gap: 8px;
      font-size: 14px;
      margin-top: 11px;}
#landing-champu-romero .cl-orelvie-urgency-stars svg{width: 15px;
      height: 15px;}
#landing-champu-romero .cl-orelvie-urgency-rating,#landing-champu-romero .cl-orelvie-urgency-link{font-size: 14px;}}
#landing-champu-romero .product__title-Ab0dRajE0dC9tTnhZV__title h1{font-size: 3.9rem;}
@media screen and (max-width: 749px){
#landing-champu-romero .product__title-Ab0dRajE0dC9tTnhZV__title h1{font-size: 2.0rem;}}
#landing-champu-romero .cl-orelvie-benefits-container{--cl-brand-dark: #1A1A1A;
      --cl-brand-muted: #4A4A4A;
      --cl-badge-bg: #E8EFEA;
      --cl-badge-text: #2A4035;
      --cl-accent-green: #2A4035;
      --cl-divider-color: #EAEAEA;
      --cl-font-size-base: 13.5px;}
#landing-champu-romero .cl-orelvie-benefits-container{max-width: 550px;
      width: 100%;
      margin: 8px 0;
      padding: 0;
      font-family: 'Montserrat', sans-serif;
      box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;}
#landing-champu-romero .cl-orelvie-benefits-container *,#landing-champu-romero .cl-orelvie-benefits-container *::before,#landing-champu-romero .cl-orelvie-benefits-container *::after{box-sizing: border-box;
      margin: 0;
      padding: 0;}
#landing-champu-romero .cl-orelvie-benefits-badges{display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 8px;}
#landing-champu-romero .cl-orelvie-benefits-badge{display: inline-flex;
      align-items: center;
      background-color: var(--cl-badge-bg);
      color: var(--cl-badge-text);
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      line-height: 1;
      white-space: nowrap;}
#landing-champu-romero .cl-orelvie-benefits-divider{height: 1px;
      width: 100%;
      background-color: var(--cl-divider-color);
      border: none;
      margin: 0 0 8px 0;}
#landing-champu-romero .cl-orelvie-benefits-list{display: flex;
      flex-direction: column;
      gap: 6px;}
#landing-champu-romero .cl-orelvie-benefits-item{display: flex;
      align-items: flex-start;
      gap: 8px;
      color: var(--cl-brand-muted);
      font-size: var(--cl-font-size-base);
      line-height: 1.25;
      transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
      opacity: 0;
      transform: translateY(6px);
      animation: clFadeInSlideCompact 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
      will-change: transform, opacity;}
#landing-champu-romero .cl-orelvie-benefits-item:hover{transform: translateX(3px);}
#landing-champu-romero .cl-orelvie-benefits-item strong{color: var(--cl-brand-dark);
      font-weight: 600;}
#landing-champu-romero .cl-orelvie-benefits-icon{flex-shrink: 0;
      width: 14px;
      height: 14px;
      color: var(--cl-accent-green);
      margin-top: 1px;}
#landing-champu-romero .cl-orelvie-benefits-item:nth-child(1){animation-delay: 0.05s;}
#landing-champu-romero .cl-orelvie-benefits-item:nth-child(2){animation-delay: 0.10s;}
#landing-champu-romero .cl-orelvie-benefits-item:nth-child(3){animation-delay: 0.15s;}
#landing-champu-romero .cl-orelvie-benefits-item:nth-child(4){animation-delay: 0.20s;}
#landing-champu-romero .cl-orelvie-benefits-item:nth-child(5){animation-delay: 0.25s;}
@keyframes clFadeInSlideCompact{
      0% {
        opacity: 0;
        transform: translateY(6px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
@media (prefers-reduced-motion: reduce){
#landing-champu-romero .cl-orelvie-benefits-item{animation: none;
        opacity: 1;
        transform: none;}
#landing-champu-romero .cl-orelvie-benefits-item:hover{transform: none;}}
#landing-champu-romero #quantity-breaks-template--30775334011225__main .quantity-break__upsell{--image-size: 2.7rem;
    --text-size: 1.1rem;
    --checkbox-size: 1.507rem;}
#landing-champu-romero .cl-orelvie-trustfaq-container{--cl-faq-bg: #FFFFFF;
    --cl-text-main: #1C1B1B;
    --cl-text-muted: #4A4A4A;
    --cl-gold-stars: #D4AF37;
    --cl-accent-green: #2A4035;
    --cl-border-line: #EAEAEA;
    --cl-radius: 12px;}
#landing-champu-romero .cl-orelvie-trustfaq-container,#landing-champu-romero .cl-orelvie-trustfaq-container *,#landing-champu-romero .cl-orelvie-trustfaq-container *::before,#landing-champu-romero .cl-orelvie-trustfaq-container *::after{box-sizing: border-box;
    margin: 0;
    padding: 0;}
#landing-champu-romero .cl-orelvie-trustfaq-container{max-width: 600px;
    width: 100%;
    background: var(--cl-faq-bg);
    font-family: 'Montserrat', sans-serif;
    color: var(--cl-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 24px;}
#landing-champu-romero .cl-orelvie-trustfaq-animate{opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);}
#landing-champu-romero .cl-orelvie-trustfaq-animate.is-visible{opacity: 1;
    transform: translateY(0);}
#landing-champu-romero .cl-orelvie-trustfaq-animate:nth-child(1){transition-delay: 0s;}
#landing-champu-romero .cl-orelvie-trustfaq-animate:nth-child(2){transition-delay: 0.12s;}
#landing-champu-romero .cl-orelvie-trustfaq-animate:nth-child(3){transition-delay: 0.24s;}
#landing-champu-romero .cl-orelvie-trustfaq-testimonial{display: flex;
    gap: 16px;
    align-items: flex-start;}
#landing-champu-romero .cl-orelvie-trustfaq-avatar{flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: block;}
#landing-champu-romero .cl-orelvie-trustfaq-avatar img{width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;}
#landing-champu-romero .cl-orelvie-trustfaq-testimonial-body{flex: 1;
    min-width: 0;}
#landing-champu-romero .cl-orelvie-trustfaq-testimonial-text{font-size: 15px;
    line-height: 1.6;
    color: var(--cl-text-muted);
    font-style: italic;
    font-weight: 400;
    margin-bottom: 10px;}
#landing-champu-romero .cl-orelvie-trustfaq-testimonial-footer{display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;}
#landing-champu-romero .cl-orelvie-trustfaq-testimonial-name{font-size: 14px;
    font-weight: 600;
    color: var(--cl-text-main);
    letter-spacing: 0.01em;}
#landing-champu-romero .cl-orelvie-trustfaq-stars{display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--cl-gold-stars);
    line-height: 0;}
#landing-champu-romero .cl-orelvie-trustfaq-stars svg{width: 14px;
    height: 14px;
    display: block;}
#landing-champu-romero .cl-orelvie-trustfaq-trust-row{display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;}
#landing-champu-romero .cl-orelvie-trustfaq-trust-item{display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 12px;
    border: 1px solid var(--cl-border-line);
    border-radius: var(--cl-radius);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;}
#landing-champu-romero .cl-orelvie-trustfaq-trust-item:hover{border-color: rgba(42, 64, 53, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);}
#landing-champu-romero .cl-orelvie-trustfaq-trust-icon{display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--cl-accent-green);
    flex-shrink: 0;}
#landing-champu-romero .cl-orelvie-trustfaq-trust-icon svg{width: 26px;
    height: 26px;
    display: block;}
#landing-champu-romero .cl-orelvie-trustfaq-trust-label{font-size: 12.5px;
    font-weight: 600;
    color: var(--cl-text-main);
    letter-spacing: 0.02em;
    line-height: 1.35;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-list{display: flex;
    flex-direction: column;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-list details:not(:last-child){border-bottom: 1px solid var(--cl-border-line);}
#landing-champu-romero .cl-orelvie-trustfaq-faq-list summary{display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--cl-text-main);
    line-height: 1.4;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
    transition: color 0.2s ease;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-list summary::-webkit-details-marker{display: none;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-list summary::marker{display: none;
    content: '';}
#landing-champu-romero .cl-orelvie-trustfaq-faq-list summary:hover{color: var(--cl-accent-green);}
#landing-champu-romero .cl-orelvie-trustfaq-faq-icon{flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);}
#landing-champu-romero .cl-orelvie-trustfaq-faq-icon::before,#landing-champu-romero .cl-orelvie-trustfaq-faq-icon::after{content: '';
    position: absolute;
    background-color: var(--cl-accent-green);
    border-radius: 1px;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-icon::before{width: 14px;
    height: 1.5px;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-icon::after{width: 1.5px;
    height: 14px;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-list details[open] .cl-orelvie-trustfaq-faq-icon::after{transform: scaleY(0);
    opacity: 0;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-list details[open] .cl-orelvie-trustfaq-faq-icon::before{width: 16px;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-answer{padding: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cl-text-muted);
    font-weight: 400;
    animation: clAccordionFade 0.35s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    will-change: opacity, transform;}
@keyframes clAccordionFade{
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
@media (prefers-reduced-motion: reduce){
#landing-champu-romero .cl-orelvie-trustfaq-animate{opacity: 1 !important;
      transform: none !important;
      transition: none !important;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-answer{animation: none !important;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-icon::before,#landing-champu-romero .cl-orelvie-trustfaq-faq-icon::after{transition: none !important;}
#landing-champu-romero .cl-orelvie-trustfaq-trust-item{transition: none !important;}}
@media (max-width: 767px){
#landing-champu-romero .cl-orelvie-trustfaq-container{gap: 24px;}
#landing-champu-romero .cl-orelvie-trustfaq-avatar{width: 40px; height: 40px;}
#landing-champu-romero .cl-orelvie-trustfaq-testimonial-text{font-size: 14px; line-height: 1.55;}
#landing-champu-romero .cl-orelvie-trustfaq-testimonial-name{font-size: 13px;}
#landing-champu-romero .cl-orelvie-trustfaq-stars svg{width: 13px; height: 13px;}
#landing-champu-romero .cl-orelvie-trustfaq-trust-row{gap: 8px;}
#landing-champu-romero .cl-orelvie-trustfaq-trust-item{padding: 12px 8px; gap: 6px;}
#landing-champu-romero .cl-orelvie-trustfaq-trust-icon svg{width: 22px; height: 22px;}
#landing-champu-romero .cl-orelvie-trustfaq-trust-label{font-size: 11.5px; letter-spacing: 0.01em; line-height: 1.3;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-list summary{font-size: 14px; padding: 14px 0;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-answer{font-size: 14px; padding: 0 0 14px;}}
@media (min-width: 768px){
#landing-champu-romero .cl-orelvie-trustfaq-container{gap: 32px;}
#landing-champu-romero .cl-orelvie-trustfaq-testimonial-text{font-size: 15.5px;}
#landing-champu-romero .cl-orelvie-trustfaq-trust-item{padding: 18px 12px;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-list summary{font-size: 15.5px; padding: 18px 0;}
#landing-champu-romero .cl-orelvie-trustfaq-faq-answer{font-size: 15.5px; padding: 0 0 18px;}}
#landing-champu-romero .section-template--30775334011225__custom_liquid_yNwa7B-padding{padding-top: calc(0px * 0.75);
    padding-bottom: calc(0px  * 0.75);}
@media screen and (min-width: 750px){
#landing-champu-romero .section-template--30775334011225__custom_liquid_yNwa7B-padding{padding-top: 0px;
      padding-bottom: 0px;}}
#landing-champu-romero .cl-orlv-prob-section{--cl-orlv-prob-bg: #F9F8F6;
    --cl-orlv-prob-text: #1A1A1A;
    --cl-orlv-prob-muted: #5A5A5A;
    --cl-orlv-prob-accent: #2A4035;

    font-family: 'Montserrat', sans-serif;
    color: var(--cl-orlv-prob-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}
#landing-champu-romero .cl-orlv-prob-section *,#landing-champu-romero .cl-orlv-prob-section *::before,#landing-champu-romero .cl-orlv-prob-section *::after{margin: 0;
    padding: 0;
    box-sizing: border-box;}
#landing-champu-romero .cl-orlv-prob-outer{width: 100%;
    background: var(--cl-orlv-prob-bg);
    overflow: hidden;}
#landing-champu-romero .cl-orlv-prob-inner{max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px;
    gap: 40px;}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-prob-inner{flex-direction: row;
      padding: 100px 20px;
      gap: 60px;}}
#landing-champu-romero .cl-orlv-prob-text-col{flex: 0 0 100%;
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-prob-text-col{flex: 0 0 55%;}}
#landing-champu-romero .cl-orlv-prob-section.is-visible .cl-orlv-prob-text-col{opacity: 1;
    transform: translateX(0);}
#landing-champu-romero .cl-orlv-prob-tagline{display: block;
    color: var(--cl-orlv-prob-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 24px;
    line-height: 1;}
#landing-champu-romero .cl-orlv-prob-title{font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 28px;
    color: var(--cl-orlv-prob-text);}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-prob-title{font-size: 38px;
      margin-bottom: 32px;}}
#landing-champu-romero .cl-orlv-prob-desc{font-size: 16px;
    line-height: 1.7;
    color: var(--cl-orlv-prob-muted);
    margin-bottom: 24px;
    font-weight: 400;}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-prob-desc{font-size: 17px;}}
#landing-champu-romero .cl-orlv-prob-desc-highlight{font-size: 16px;
    line-height: 1.7;
    color: var(--cl-orlv-prob-text);
    margin-bottom: 0;
    font-weight: 700;}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-prob-desc-highlight{font-size: 17px;}}
#landing-champu-romero .cl-orlv-prob-image-col{flex: 0 0 100%;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-prob-image-col{flex: 0 0 45%;}}
#landing-champu-romero .cl-orlv-prob-section.is-visible .cl-orlv-prob-image-col{opacity: 1;
    transform: translateY(0);}
#landing-champu-romero .cl-orlv-prob-image-wrap{aspect-ratio: 4 / 3;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-prob-image-wrap{aspect-ratio: 4 / 5;}}
#landing-champu-romero .cl-orlv-prob-image-wrap img{width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform;
    transform: scale(1.08);
    transition: transform 0.1s linear;}
@media (prefers-reduced-motion: reduce){
#landing-champu-romero .cl-orlv-prob-text-col{opacity: 1 !important;
      transform: none !important;
      transition: none !important;}
#landing-champu-romero .cl-orlv-prob-image-col{opacity: 1 !important;
      transform: none !important;
      transition: none !important;}
#landing-champu-romero .cl-orlv-prob-image-wrap img{transform: scale(1) !important;
      transition: none !important;}}
#landing-champu-romero .section-template--30775334011225__custom_liquid_fxGcFf-padding{padding-top: calc(0px * 0.75);
    padding-bottom: calc(0px  * 0.75);}
@media screen and (min-width: 750px){
#landing-champu-romero .section-template--30775334011225__custom_liquid_fxGcFf-padding{padding-top: 0px;
      padding-bottom: 0px;}}
#landing-champu-romero .cl-orlv-mech-section{--cl-orlv-mech-bg: #FFFFFF;
    --cl-orlv-mech-text: #1A1A1A;
    --cl-orlv-mech-muted: #5A5A5A;
    --cl-orlv-mech-green: #2A4035;
    --cl-orlv-mech-card-bg: #F9F8F6;
    --cl-orlv-mech-border: #EAEAEA;

    font-family: 'Montserrat', sans-serif;
    background: var(--cl-orlv-mech-bg);
    color: var(--cl-orlv-mech-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}
#landing-champu-romero .cl-orlv-mech-section *,#landing-champu-romero .cl-orlv-mech-section *::before,#landing-champu-romero .cl-orlv-mech-section *::after{margin: 0;
    padding: 0;
    box-sizing: border-box;}
#landing-champu-romero .cl-orlv-mech-container{max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    text-align: center;}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-mech-container{padding: 100px 20px;}}
#landing-champu-romero .cl-orlv-mech-tagline{display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--cl-orlv-mech-green);
    margin-bottom: 16px;
    line-height: 1;}
#landing-champu-romero .cl-orlv-mech-title{font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--cl-orlv-mech-text);
    line-height: 1.2;
    margin-bottom: 20px;}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-mech-title{font-size: 42px;
      letter-spacing: -1px;}}
#landing-champu-romero .cl-orlv-mech-subtitle{max-width: 700px;
    margin: 0 auto 48px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cl-orlv-mech-muted);
    font-weight: 400;}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-mech-subtitle{font-size: 16px;
      margin-bottom: 60px;}}
#landing-champu-romero .cl-orlv-mech-grid{display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    text-align: left;}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-mech-grid{grid-template-columns: 1fr 1fr;
      gap: 60px;}}
#landing-champu-romero .cl-orlv-mech-image-col{opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);}
#landing-champu-romero .cl-orlv-mech-section.is-visible .cl-orlv-mech-image-col{opacity: 1;
    transform: scale(1);}
#landing-champu-romero .cl-orlv-mech-image-wrap{border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(42, 64, 53, 0.15);
    position: relative;}
#landing-champu-romero .cl-orlv-mech-image-wrap img{width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover;}
#landing-champu-romero .cl-orlv-mech-cards-col{display: flex;
    flex-direction: column;
    gap: 24px;}
#landing-champu-romero .cl-orlv-mech-card{background: var(--cl-orlv-mech-card-bg);
    padding: 28px;
    border-radius: 16px;
    border: 1px solid var(--cl-orlv-mech-border);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    opacity: 0;
    transform: translateX(30px);}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-mech-card{padding: 32px;}}
#landing-champu-romero .cl-orlv-mech-section.is-visible .cl-orlv-mech-card:nth-child(1){opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;}
#landing-champu-romero .cl-orlv-mech-section.is-visible .cl-orlv-mech-card:nth-child(2){opacity: 1;
    transform: translateX(0);
    transition-delay: 0.35s;}
#landing-champu-romero .cl-orlv-mech-section.is-visible .cl-orlv-mech-card:nth-child(3){opacity: 1;
    transform: translateX(0);
    transition-delay: 0.5s;}
#landing-champu-romero .cl-orlv-mech-card::before{content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(42, 64, 53, 0.04) 50%,
      transparent 100%
    );
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 0;}
#landing-champu-romero .cl-orlv-mech-card:hover::before{left: 100%;}
#landing-champu-romero .cl-orlv-mech-card::after{content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--cl-orlv-mech-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);}
#landing-champu-romero .cl-orlv-mech-card:hover::after{transform: scaleX(1);}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-mech-card:hover{transform: translateY(-5px);
      box-shadow: 0 16px 40px rgba(42, 64, 53, 0.08);
      border-color: rgba(42, 64, 53, 0.15);}}
#landing-champu-romero .cl-orlv-mech-card-header{display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;}
#landing-champu-romero .cl-orlv-mech-card-icon{flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--cl-orlv-mech-green);
    display: flex;
    align-items: center;
    justify-content: center;}
#landing-champu-romero .cl-orlv-mech-card-icon svg{width: 22px;
    height: 22px;
    stroke: #FFFFFF;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;}
#landing-champu-romero .cl-orlv-mech-card-title{font-size: 17px;
    font-weight: 700;
    color: var(--cl-orlv-mech-green);
    line-height: 1.3;}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-mech-card-title{font-size: 18px;}}
#landing-champu-romero .cl-orlv-mech-card-text{font-size: 14px;
    color: var(--cl-orlv-mech-muted);
    line-height: 1.55;
    font-weight: 400;
    position: relative;
    z-index: 1;
    padding-left: 52px;}
@media (min-width: 900px){
#landing-champu-romero .cl-orlv-mech-card-text{font-size: 15px;}}
@media (prefers-reduced-motion: reduce){
#landing-champu-romero .cl-orlv-mech-image-col{opacity: 1 !important;
      transform: none !important;
      transition: none !important;}
#landing-champu-romero .cl-orlv-mech-card{opacity: 1 !important;
      transform: none !important;
      transition: none !important;}
#landing-champu-romero .cl-orlv-mech-card::before{transition: none !important;}
#landing-champu-romero .cl-orlv-mech-card::after{transition: none !important;}}
#landing-champu-romero .section-template--30775334011225__custom_liquid_Hiraw3-padding{padding-top: calc(0px * 0.75);
    padding-bottom: calc(0px  * 0.75);}
@media screen and (min-width: 750px){
#landing-champu-romero .section-template--30775334011225__custom_liquid_Hiraw3-padding{padding-top: 0px;
      padding-bottom: 0px;}}
#landing-champu-romero{--cl-ticker-bg: #FFFFF;
    --cl-ticker-accent: #D4AF37;
    --cl-ticker-text: #333333;
    --cl-ticker-speed: 30s;
    --cl-ticker-logo-h: 35px; 
    --cl-ticker-logo-h-mob: 28px;}
#landing-champu-romero .cl-authority-ticker-section{background-color: var(--cl-ticker-bg);
    padding: 25px 0; 
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;}
#landing-champu-romero .cl-authority-ticker-header{display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    margin-bottom: 20px;
    padding: 0 20px;}
#landing-champu-romero .cl-authority-ticker-line{height: 0.5px;
    background-color: var(--cl-ticker-accent);
    flex-grow: 1;
    opacity: 0.4;}
#landing-champu-romero .cl-authority-ticker-title{font-family: 'Playfair Display', serif;
    font-size: 14px;
    color: var(--cl-ticker-text);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0 25px;
    white-space: nowrap;
    font-weight: 400;}
#landing-champu-romero .cl-authority-ticker-viewport{width: 100%;
    
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);}
#landing-champu-romero .cl-authority-ticker-track{display: flex;
    align-items: center;
    width: max-content;
    gap: 70px;
    animation: cl-marquee var(--cl-ticker-speed) linear infinite;}
#landing-champu-romero .cl-authority-ticker-track:hover{animation-play-state: paused;}
#landing-champu-romero .cl-authority-ticker-logo{height: var(--cl-ticker-logo-h);
    width: auto;
    
    filter: none;
    opacity: 1;
    transition: transform 0.3s ease;
    flex-shrink: 0;}
#landing-champu-romero .cl-authority-ticker-logo:hover{transform: scale(1.05);}
@keyframes cl-marquee{
    0% { transform: translateX(0); }
    100% { transform: translateX(-33.333%); } 
  }
@media (max-width: 768px){
#landing-champu-romero .cl-authority-ticker-section{padding: 15px 0;}
#landing-champu-romero .cl-authority-ticker-header{margin-bottom: 15px;}
#landing-champu-romero .cl-authority-ticker-title{font-size: 12px; padding: 0 15px;}
#landing-champu-romero .cl-authority-ticker-track{gap: 40px;}
#landing-champu-romero .cl-authority-ticker-logo{height: var(--cl-ticker-logo-h-mob);}}
#landing-champu-romero .section-template--30775334011225__custom_liquid_6ecVTJ-padding{padding-top: calc(0px * 0.75);
    padding-bottom: calc(0px  * 0.75);}
@media screen and (min-width: 750px){
#landing-champu-romero .section-template--30775334011225__custom_liquid_6ecVTJ-padding{padding-top: 0px;
      padding-bottom: 0px;}}
#landing-champu-romero .cl-orlv-slider-wrapper{--orlv-bg: transparent;
    --orlv-text-main: #1A1A1A;
    --orlv-bg-tags: #2A4035;
    --orlv-text-tags: #FFFFFF;
    --orlv-slider-handle: #FFFFFF;
    --orlv-slider-line: #FFFFFF;

    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    background: var(--orlv-bg);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;}
#landing-champu-romero .cl-orlv-slider-wrapper *,#landing-champu-romero .cl-orlv-slider-wrapper *::before,#landing-champu-romero .cl-orlv-slider-wrapper *::after{box-sizing: border-box;}
#landing-champu-romero .cl-orlv-slider-title{margin: 0;
    color: var(--orlv-text-main);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;}
#landing-champu-romero .cl-orlv-slider-rating{margin: 14px 0 0;
    color: #4B4B4B;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;}
#landing-champu-romero .cl-orlv-slider-stars{color: #FFD700;
    letter-spacing: 1px;}
#landing-champu-romero .cl-orlv-slider-container{--position: 50%;

    position: relative;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 1 / 1;
    margin: 40px auto 0;
    overflow: hidden;
    border-radius: 16px;
    background: #EAEAEA;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.12);
    isolation: isolate;
    user-select: none;
    -webkit-user-select: none;}
#landing-champu-romero .cl-orlv-slider-image-wrapper{position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;}
#landing-champu-romero .cl-orlv-slider-image-before{z-index: 1;}
#landing-champu-romero .cl-orlv-slider-image-after{z-index: 2;
    clip-path: polygon(
      var(--position) 0,
      100% 0,
      100% 100%,
      var(--position) 100%
    );
    will-change: clip-path;}
#landing-champu-romero .cl-orlv-slider-image{display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    -webkit-user-drag: none;}
#landing-champu-romero .cl-orlv-slider-badge{position: absolute;
    top: 20px;
    z-index: 10;
    margin: 0;
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--orlv-bg-tags);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: var(--orlv-text-tags);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
    pointer-events: none;}
#landing-champu-romero .cl-orlv-slider-badge-before{left: 20px;}
#landing-champu-romero .cl-orlv-slider-badge-after{right: 20px;}
#landing-champu-romero .cl-orlv-slider-divider{position: absolute;
    top: 0;
    bottom: 0;
    left: var(--position);
    z-index: 12;
    width: 3px;
    background: var(--orlv-slider-line);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transform: translateX(-50%);
    pointer-events: none;
    will-change: left;}
#landing-champu-romero .cl-orlv-slider-handle{position: absolute;
    top: 50%;
    left: var(--position);
    z-index: 15;
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--orlv-slider-handle);
    box-shadow:
      0 0 20px rgba(255, 255, 255, 0.8),
      0 4px 10px rgba(0, 0, 0, 0.2);
    color: #343434;
    transform: translate(-50%, -50%);
    transition:
      width 0.25s ease,
      height 0.25s ease,
      box-shadow 0.25s ease,
      transform 0.25s ease;
    pointer-events: none;
    will-change: left, transform;}
#landing-champu-romero .cl-orlv-slider-handle svg{display: block;
    width: 25px;
    height: 25px;}
#landing-champu-romero .cl-orlv-slider-range{position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: ew-resize;
    touch-action: pan-y;
    appearance: none;
    -webkit-appearance: none;}
#landing-champu-romero .cl-orlv-slider-container:hover .cl-orlv-slider-handle,#landing-champu-romero .cl-orlv-slider-container:focus-within .cl-orlv-slider-handle,#landing-champu-romero .cl-orlv-slider-container.cl-orlv-slider-is-dragging .cl-orlv-slider-handle{box-shadow:
      0 0 28px rgba(255, 255, 255, 1),
      0 6px 16px rgba(0, 0, 0, 0.26);
    transform: translate(-50%, -50%) scale(1.08);}
#landing-champu-romero .cl-orlv-slider-range:focus-visible + .cl-orlv-slider-divider{box-shadow:
      0 0 0 3px rgba(42, 64, 53, 0.35),
      0 0 10px rgba(0, 0, 0, 0.3);}
#landing-champu-romero .cl-orlv-slider-animate{opacity: 0;
    transform: translateY(30px);
    transition:
      opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);}
#landing-champu-romero .cl-orlv-slider-title.cl-orlv-slider-animate{transition-delay: 0s;}
#landing-champu-romero .cl-orlv-slider-rating.cl-orlv-slider-animate{transition-delay: 0.1s;}
#landing-champu-romero .cl-orlv-slider-container.cl-orlv-slider-animate{transition-delay: 0.2s;}
#landing-champu-romero .cl-orlv-slider-animate.cl-orlv-slider-is-visible{opacity: 1;
    transform: translateY(0);}
@media (max-width: 767px){
#landing-champu-romero .cl-orlv-slider-wrapper{padding: 44px 16px;}
#landing-champu-romero .cl-orlv-slider-title{font-size: 28px;
      line-height: 1.2;}
#landing-champu-romero .cl-orlv-slider-rating{margin-top: 12px;
      font-size: 13px;}
#landing-champu-romero .cl-orlv-slider-container{width: 100%;
      margin-top: 30px;
      border-radius: 14px;}
#landing-champu-romero .cl-orlv-slider-badge{top: 12px;
      padding: 6px 12px;
      font-size: 11px;}
#landing-champu-romero .cl-orlv-slider-badge-before{left: 12px;}
#landing-champu-romero .cl-orlv-slider-badge-after{right: 12px;}
#landing-champu-romero .cl-orlv-slider-handle{width: 40px;
      height: 40px;}
#landing-champu-romero .cl-orlv-slider-handle svg{width: 21px;
      height: 21px;}}
@media (prefers-reduced-motion: reduce){
#landing-champu-romero .cl-orlv-slider-animate{opacity: 1;
      transform: none;
      transition: none;}
#landing-champu-romero .cl-orlv-slider-handle{transition: none;}}
#landing-champu-romero .section-template--30775334011225__custom_liquid_mjCEBH-padding{padding-top: calc(0px * 0.75);
    padding-bottom: calc(0px  * 0.75);}
@media screen and (min-width: 750px){
#landing-champu-romero .section-template--30775334011225__custom_liquid_mjCEBH-padding{padding-top: 0px;
      padding-bottom: 0px;}}
#landing-champu-romero .cl-orlv-iwt-section{--orlv-iwt-bg: transparent;
    --orlv-iwt-text-main: #1A1A1A;
    --orlv-iwt-text-body: #333333;
    --orlv-iwt-accent: #2A4035;
    --orlv-iwt-radius: 16px;
    --orlv-iwt-shadow: 0 24px 50px rgba(0, 0, 0, 0.12);

    font-family: 'Montserrat', sans-serif;
    background: var(--orlv-iwt-bg);
    color: var(--orlv-iwt-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}
#landing-champu-romero .cl-orlv-iwt-section *{margin: 0;
    padding: 0;
    box-sizing: border-box;}
#landing-champu-romero .cl-orlv-iwt-wrapper{max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 16px;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-iwt-wrapper{padding: 36px 40px;}}
#landing-champu-romero .cl-orlv-iwt-grid{display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-iwt-grid{grid-template-columns: 1fr 1fr;
      gap: 0;}}
#landing-champu-romero .cl-orlv-iwt-media{width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--orlv-iwt-radius);
    box-shadow: var(--orlv-iwt-shadow);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);}
#landing-champu-romero .cl-orlv-iwt-media img{width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;}
#landing-champu-romero .cl-orlv-iwt-content{display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-iwt-content{padding: 40px;}}
#landing-champu-romero .cl-orlv-iwt-title{font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--orlv-iwt-text-main);
    margin: 0 0 16px;
    line-height: 1.25;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-iwt-title{font-size: 32px;}}
#landing-champu-romero .cl-orlv-iwt-title strong{color: var(--orlv-iwt-accent);}
#landing-champu-romero .cl-orlv-iwt-text{font-size: 15px;
    line-height: 1.7;
    color: var(--orlv-iwt-text-body);
    font-weight: 400;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-iwt-text{font-size: 16px;}}
#landing-champu-romero .cl-orlv-iwt-text strong{font-weight: 700;}
#landing-champu-romero .cl-orlv-iwt-section .is-visible{opacity: 1 !important;
    transform: translateY(0) !important;}
#landing-champu-romero .section-template--30775334011225__custom_liquid_Krytxf-padding{padding-top: calc(0px * 0.75);
    padding-bottom: calc(0px  * 0.75);}
@media screen and (min-width: 750px){
#landing-champu-romero .section-template--30775334011225__custom_liquid_Krytxf-padding{padding-top: 0px;
      padding-bottom: 0px;}}
#landing-champu-romero .cl-orlv-fake-section{--orlv-fake-bg: transparent;
    --orlv-fake-text-main: #1A1A1A;
    --orlv-fake-text-body: #333333;
    --orlv-fake-accent: #2A4035;
    --orlv-fake-radius: 16px;
    --orlv-fake-shadow: 0 24px 50px rgba(0, 0, 0, 0.12);

    font-family: 'Montserrat', sans-serif;
    background: var(--orlv-fake-bg);
    color: var(--orlv-fake-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}
#landing-champu-romero .cl-orlv-fake-section *{margin: 0;
    padding: 0;
    box-sizing: border-box;}
#landing-champu-romero .cl-orlv-fake-wrapper{max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 16px;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-fake-wrapper{padding: 36px 40px;}}
#landing-champu-romero .cl-orlv-fake-grid{display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-fake-grid{grid-template-columns: 1fr 1fr;
      gap: 0;}
#landing-champu-romero .cl-orlv-fake-grid--reverse{direction: rtl;}
#landing-champu-romero .cl-orlv-fake-grid--reverse > *{direction: ltr;}}
#landing-champu-romero .cl-orlv-fake-media{width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--orlv-fake-radius);
    box-shadow: var(--orlv-fake-shadow);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);}
#landing-champu-romero .cl-orlv-fake-media img{width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;}
#landing-champu-romero .cl-orlv-fake-content{display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-fake-content{padding: 40px;}}
#landing-champu-romero .cl-orlv-fake-title{font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--orlv-fake-text-main);
    margin: 0 0 16px;
    line-height: 1.25;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-fake-title{font-size: 32px;}}
#landing-champu-romero .cl-orlv-fake-title strong{color: var(--orlv-fake-accent);}
#landing-champu-romero .cl-orlv-fake-text{font-size: 15px;
    line-height: 1.7;
    color: var(--orlv-fake-text-body);
    font-weight: 400;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-fake-text{font-size: 16px;}}
#landing-champu-romero .cl-orlv-fake-text strong{font-weight: 700;}
#landing-champu-romero .cl-orlv-fake-section .is-visible{opacity: 1 !important;
    transform: translateY(0) !important;}
#landing-champu-romero .section-template--30775334011225__custom_liquid_9zzL83-padding{padding-top: calc(0px * 0.75);
    padding-bottom: calc(0px  * 0.75);}
@media screen and (min-width: 750px){
#landing-champu-romero .section-template--30775334011225__custom_liquid_9zzL83-padding{padding-top: 0px;
      padding-bottom: 0px;}}
#landing-champu-romero .cl-orlv-tiktok-section{--orlv-tiktok-bg: transparent;
    --orlv-tiktok-text-main: #1A1A1A;
    --orlv-tiktok-accent: #2A4035;
    --orlv-tiktok-radius: 16px;
    --orlv-tiktok-shadow: 0 24px 50px rgba(0, 0, 0, 0.12);

    font-family: 'Montserrat', sans-serif;
    background: var(--orlv-tiktok-bg);
    color: var(--orlv-tiktok-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}
#landing-champu-romero .cl-orlv-tiktok-section *{margin: 0;
    padding: 0;
    box-sizing: border-box;}
#landing-champu-romero .cl-orlv-tiktok-wrapper{max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 16px;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-tiktok-wrapper{padding: 36px 40px;}}
#landing-champu-romero .cl-orlv-tiktok-grid{display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-tiktok-grid{grid-template-columns: 1fr 1fr;
      gap: 0;}}
#landing-champu-romero .cl-orlv-tiktok-media{width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--orlv-tiktok-radius);
    box-shadow: var(--orlv-tiktok-shadow);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);}
#landing-champu-romero .cl-orlv-tiktok-media img{width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;}
#landing-champu-romero .cl-orlv-tiktok-content{display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-tiktok-content{padding: 40px;}}
#landing-champu-romero .cl-orlv-tiktok-title{font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--orlv-tiktok-text-main);
    margin: 0;
    line-height: 1.25;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-tiktok-title{font-size: 28px;}}
#landing-champu-romero .cl-orlv-tiktok-section .is-visible{opacity: 1 !important;
    transform: translateY(0) !important;}
#landing-champu-romero .section-template--30775334011225__custom_liquid_WNXK6x-padding{padding-top: calc(0px * 0.75);
    padding-bottom: calc(0px  * 0.75);}
@media screen and (min-width: 750px){
#landing-champu-romero .section-template--30775334011225__custom_liquid_WNXK6x-padding{padding-top: 0px;
      padding-bottom: 0px;}}
#landing-champu-romero .cl-orlv-review-section{--orlv-bg-section: transparent;
    --orlv-card-bg: #FFFFFF;
    --orlv-text-main: #1A1A1A;
    --orlv-text-muted: #4A4A4A;
    --orlv-brand-green: #2A4035;
    --orlv-stars: #E5B94A;
    --orlv-border: #EAEAEA;

    font-family: 'Montserrat', sans-serif;
    background: var(--orlv-bg-section);
    color: var(--orlv-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;}
#landing-champu-romero .cl-orlv-review-section *{margin: 0;
    padding: 0;
    box-sizing: border-box;}
#landing-champu-romero .cl-orlv-review-wrapper{max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px 50px;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-review-wrapper{padding: 60px 40px 70px;}}
#landing-champu-romero .cl-orlv-review-track-outer{position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);}
#landing-champu-romero .cl-orlv-review-track-outer.is-visible{opacity: 1;
    transform: translateY(0);}
#landing-champu-romero .cl-orlv-review-track{display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 8px 4px 16px;
    scrollbar-width: none;}
#landing-champu-romero .cl-orlv-review-track::-webkit-scrollbar{display: none;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-review-track{gap: 32px;
      padding: 8px 0 16px;}}
#landing-champu-romero .cl-orlv-review-card{flex: 0 0 85%;
    min-width: 280px;
    background: var(--orlv-card-bg);
    border: 1px solid var(--orlv-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    scroll-snap-align: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-review-card{flex: 0 0 calc(33.333% - 22px);
      min-width: unset;
      scroll-snap-align: start;}
#landing-champu-romero .cl-orlv-review-card:hover{transform: translateY(-6px);
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);}
#landing-champu-romero .cl-orlv-review-card:hover .cl-orlv-review-image-wrap img{transform: scale(1.04);}}
#landing-champu-romero .cl-orlv-review-image-wrap{aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;}
#landing-champu-romero .cl-orlv-review-image-wrap img{width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);}
#landing-champu-romero .cl-orlv-review-body{padding: 24px 20px;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-review-body{padding: 32px 24px;}}
#landing-champu-romero .cl-orlv-review-verified{display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;}
#landing-champu-romero .cl-orlv-review-stars{display: flex;
    gap: 2px;}
#landing-champu-romero .cl-orlv-review-stars svg{width: 14px;
    height: 14px;
    fill: var(--orlv-stars);
    flex-shrink: 0;}
#landing-champu-romero .cl-orlv-review-verified-text{display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--orlv-brand-green);
    letter-spacing: 0.3px;}
#landing-champu-romero .cl-orlv-review-verified-text svg{width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--orlv-brand-green);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;}
#landing-champu-romero .cl-orlv-review-title{font-size: 17px;
    font-weight: 700;
    color: var(--orlv-text-main);
    margin-bottom: 12px;
    line-height: 1.35;
    letter-spacing: -0.3px;}
#landing-champu-romero .cl-orlv-review-text{font-size: 15px;
    line-height: 1.6;
    color: var(--orlv-text-muted);
    font-weight: 400;
    margin: 0;}
#landing-champu-romero .cl-orlv-review-nav{display: none;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-review-nav{display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: 28px;}}
#landing-champu-romero .cl-orlv-review-arrow{width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--orlv-border);
    background: var(--orlv-card-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    flex-shrink: 0;}
#landing-champu-romero .cl-orlv-review-arrow:hover{background: var(--orlv-brand-green);
    border-color: var(--orlv-brand-green);
    box-shadow: 0 6px 20px rgba(42, 64, 53, 0.25);
    transform: scale(1.06);}
#landing-champu-romero .cl-orlv-review-arrow:hover svg{stroke: #FFFFFF;}
#landing-champu-romero .cl-orlv-review-arrow:active{transform: scale(0.96);}
#landing-champu-romero .cl-orlv-review-arrow svg{width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--orlv-text-main);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s ease;}
#landing-champu-romero .cl-orlv-review-dots{display: flex;
    align-items: center;
    gap: 8px;}
#landing-champu-romero .cl-orlv-review-dot{width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--orlv-border);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
    padding: 0;}
#landing-champu-romero .cl-orlv-review-dot.is-active{background: var(--orlv-brand-green);
    width: 28px;
    border-radius: 5px;}
#landing-champu-romero .cl-orlv-review-dots-mobile{display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;}
@media (min-width: 750px){
#landing-champu-romero .cl-orlv-review-dots-mobile{display: none;}}
#landing-champu-romero .cl-orlv-review-dot-mobile{width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orlv-border);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease;
    padding: 0;}
#landing-champu-romero .cl-orlv-review-dot-mobile.is-active{background: var(--orlv-brand-green);
    width: 24px;
    border-radius: 4px;}
#landing-champu-romero .cl-orlv-review-star-svg{width: 14px;
    height: 14px;}
#landing-champu-romero .section-template--30775334011225__custom_liquid_jjzFTN-padding{padding-top: calc(0px * 0.75);
    padding-bottom: calc(0px  * 0.75);}
@media screen and (min-width: 750px){
#landing-champu-romero .section-template--30775334011225__custom_liquid_jjzFTN-padding{padding-top: 0px;
      padding-bottom: 0px;}}
#landing-champu-romero .cl-orlv-pure-section{--cl-orlv-bg: transparent;
    --cl-orlv-text-main: #1A1A1A;
    --cl-orlv-green: #2A4035;

    width: 100%;
    background: var(--cl-orlv-bg);
    font-family: 'Montserrat', sans-serif;}
#landing-champu-romero .cl-orlv-pure-section *,#landing-champu-romero .cl-orlv-pure-section *::before,#landing-champu-romero .cl-orlv-pure-section *::after{box-sizing: border-box;}
#landing-champu-romero .cl-orlv-pure-container{width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;}
#landing-champu-romero .cl-orlv-pure-title{margin: 0 0 48px;
    color: var(--cl-orlv-green);
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;}
#landing-champu-romero .cl-orlv-pure-grid{display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;}
#landing-champu-romero .cl-orlv-pure-item{display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    cursor: default;}
#landing-champu-romero .cl-orlv-pure-icon{position: relative;
    display: flex;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    align-items: center;
    justify-content: center;
    color: var(--cl-orlv-green);
    transform: translateY(0) scale(1);
    transition:
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.4s ease;
    will-change: transform;}
#landing-champu-romero .cl-orlv-pure-svg{display: block;
    width: 100%;
    height: 100%;
    overflow: visible;}
#landing-champu-romero .cl-orlv-pure-path{fill: none;
    stroke: var(--cl-orlv-green);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;}
#landing-champu-romero .cl-orlv-pure-text{margin: 0;
    color: var(--cl-orlv-text-main);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    transition: color 0.3s ease;}
#landing-champu-romero .cl-orlv-pure-is-drawn
    .cl-orlv-pure-item:nth-child(1)
    .cl-orlv-pure-path{animation: clOrlvPureDrawIcon 2s cubic-bezier(0.25, 1, 0.5, 1) 0s forwards;}
#landing-champu-romero .cl-orlv-pure-is-drawn
    .cl-orlv-pure-item:nth-child(2)
    .cl-orlv-pure-path{animation: clOrlvPureDrawIcon 2s cubic-bezier(0.25, 1, 0.5, 1) 0.15s forwards;}
#landing-champu-romero .cl-orlv-pure-is-drawn
    .cl-orlv-pure-item:nth-child(3)
    .cl-orlv-pure-path{animation: clOrlvPureDrawIcon 2s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;}
#landing-champu-romero .cl-orlv-pure-is-drawn
    .cl-orlv-pure-item:nth-child(4)
    .cl-orlv-pure-path{animation: clOrlvPureDrawIcon 2s cubic-bezier(0.25, 1, 0.5, 1) 0.45s forwards;}
@keyframes clOrlvPureDrawIcon{
    to {
      stroke-dashoffset: 0;
    }
  }
@media (hover: hover) and (pointer: fine){
#landing-champu-romero .cl-orlv-pure-item:hover .cl-orlv-pure-icon{filter: drop-shadow(0 8px 10px rgba(42, 64, 53, 0.14));
      transform: translateY(-5px) scale(1.05);}
#landing-champu-romero .cl-orlv-pure-item:hover .cl-orlv-pure-text{color: var(--cl-orlv-green);}}
@media (max-width: 767px){
#landing-champu-romero .cl-orlv-pure-container{padding: 44px 0 40px;
      overflow: hidden;}
#landing-champu-romero .cl-orlv-pure-title{margin-bottom: 38px;
      padding: 0 16px;
      font-size: 28px;}
#landing-champu-romero .cl-orlv-pure-grid{display: flex;
      gap: 16px;
      width: 100%;
      padding: 0 16px 16px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scroll-padding-inline: 16px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;}
#landing-champu-romero .cl-orlv-pure-grid::-webkit-scrollbar{display: none;
      width: 0;
      height: 0;}
#landing-champu-romero .cl-orlv-pure-item{flex: 0 0 42%;
      min-width: 0;
      scroll-snap-align: center;
      scroll-snap-stop: normal;}
#landing-champu-romero .cl-orlv-pure-text{font-size: 14px;}}
@media (max-width: 420px){
#landing-champu-romero .cl-orlv-pure-item{flex-basis: 44%;}}
@media (prefers-reduced-motion: reduce){
#landing-champu-romero .cl-orlv-pure-icon,#landing-champu-romero .cl-orlv-pure-text{transition: none;}
#landing-champu-romero .cl-orlv-pure-path{stroke-dashoffset: 0;
      animation: none !important;}
#landing-champu-romero .cl-orlv-pure-grid{scroll-behavior: auto;}}
#landing-champu-romero .section-template--30775334011225__custom_liquid_dy6pHd-padding{padding-top: calc(0px * 0.75);
    padding-bottom: calc(0px  * 0.75);}
@media screen and (min-width: 750px){
#landing-champu-romero .section-template--30775334011225__custom_liquid_dy6pHd-padding{padding-top: 0px;
      padding-bottom: 0px;}}
#landing-champu-romero .cl-orlv-ritual-section{--cl-orlv-bg-dark: #0D1712;
    --cl-orlv-text-light: #FFFFFF;
    --cl-orlv-text-muted: #A0AAB2;
    --cl-orlv-accent: #4A6B58;

    font-family: 'Montserrat', sans-serif;
    color: var(--cl-orlv-text-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}
#landing-champu-romero .cl-orlv-ritual-section *,#landing-champu-romero .cl-orlv-ritual-section *::before,#landing-champu-romero .cl-orlv-ritual-section *::after{margin: 0;
    padding: 0;
    box-sizing: border-box;}
#landing-champu-romero .cl-orlv-ritual-container{width: 100%;
    background: radial-gradient(circle at center, #16261D 0%, var(--cl-orlv-bg-dark) 100%);
    padding: 60px 20px;
    text-align: center;
    overflow: hidden;}
@media (min-width: 768px){
#landing-champu-romero .cl-orlv-ritual-container{padding: 80px 20px;}}
#landing-champu-romero .cl-orlv-ritual-title{font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cl-orlv-text-light);
    margin-bottom: 12px;
    line-height: 1.3;}
@media (min-width: 768px){
#landing-champu-romero .cl-orlv-ritual-title{font-size: 24px;}}
#landing-champu-romero .cl-orlv-ritual-subtitle{font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--cl-orlv-text-muted);
    margin-bottom: 50px;
    line-height: 1.5;}
#landing-champu-romero .cl-orlv-ritual-grid-wrapper{position: relative;
    max-width: 900px;
    margin: 0 auto;}
#landing-champu-romero .cl-orlv-ritual-grid{display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    position: relative;
    z-index: 2;}
@media (min-width: 768px){
#landing-champu-romero .cl-orlv-ritual-grid{grid-template-columns: repeat(3, 1fr);
      gap: 40px;}}
#landing-champu-romero .cl-orlv-ritual-connector{display: none;}
@media (min-width: 768px){
#landing-champu-romero .cl-orlv-ritual-connector{display: block;
      position: absolute;
      top: 108px;
      left: 15%;
      right: 15%;
      border-top: 2px dashed var(--cl-orlv-accent);
      opacity: 0;
      z-index: 1;
      transition: opacity 1s ease 0.6s;}
#landing-champu-romero .cl-orlv-ritual-section.is-visible .cl-orlv-ritual-connector{opacity: 0.5;}}
#landing-champu-romero .cl-orlv-ritual-step{position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);}
#landing-champu-romero .cl-orlv-ritual-section.is-visible .cl-orlv-ritual-step:nth-child(1){opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;}
#landing-champu-romero .cl-orlv-ritual-section.is-visible .cl-orlv-ritual-step:nth-child(2){opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;}
#landing-champu-romero .cl-orlv-ritual-section.is-visible .cl-orlv-ritual-step:nth-child(3){opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;}
#landing-champu-romero .cl-orlv-ritual-step-title{font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--cl-orlv-text-light);
    margin-bottom: 24px;}
@media (min-width: 768px){
#landing-champu-romero .cl-orlv-ritual-step-title{font-size: 22px;}}
#landing-champu-romero .cl-orlv-ritual-image-wrap{width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 2px solid var(--cl-orlv-accent);
    padding: 6px;
    margin-bottom: 24px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;}
@media (min-width: 768px){
#landing-champu-romero .cl-orlv-ritual-image-wrap{width: 200px;
      height: 200px;}
#landing-champu-romero .cl-orlv-ritual-step:hover .cl-orlv-ritual-image-wrap{transform: scale(1.03);
      border-color: #FFFFFF;}}
#landing-champu-romero .cl-orlv-ritual-image-wrap img{width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;}
#landing-champu-romero .cl-orlv-ritual-step-text{font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--cl-orlv-text-light);
    max-width: 220px;
    font-weight: 400;}
#landing-champu-romero .cl-orlv-ritual-footer{margin-top: 60px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--cl-orlv-text-muted);
    font-weight: 400;
    opacity: 0;
    transition: opacity 0.8s ease 0.6s;}
#landing-champu-romero .cl-orlv-ritual-section.is-visible .cl-orlv-ritual-footer{opacity: 1;}
@media (prefers-reduced-motion: reduce){
#landing-champu-romero .cl-orlv-ritual-step{opacity: 1 !important;
      transform: none !important;
      transition: none !important;}
#landing-champu-romero .cl-orlv-ritual-connector{opacity: 0.5 !important;
      transition: none !important;}
#landing-champu-romero .cl-orlv-ritual-footer{opacity: 1 !important;
      transition: none !important;}
#landing-champu-romero .cl-orlv-ritual-image-wrap{transition: none !important;}}
#landing-champu-romero .tbc-root{font-family: 'Segoe UI', system-ui, sans-serif;
    padding: 24px 16px 16px;
    background: #fff;
    overflow: hidden;}
#landing-champu-romero .tbc-track-outer{overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);}
#landing-champu-romero .tbc-track{display: flex;
    gap: 28px;
    width: max-content;
    animation: tbc-scroll 16s linear infinite;
    align-items: flex-start;
    padding: 12px 8px 16px;}
#landing-champu-romero .tbc-track:hover{animation-play-state: paused;}
@keyframes tbc-scroll{
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
#landing-champu-romero .tbc-card{display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    width: 80px;
    position: relative;
    flex-shrink: 0;}
#landing-champu-romero .tbc-icon-wrap{width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
      0 4px 12px rgba(0,0,0,0.10),
      0 1px 3px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.06);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, background 0.3s;
    animation: tbc-pulse 2.8s ease-in-out infinite;}
#landing-champu-romero .tbc-card:nth-child(1) .tbc-icon-wrap{animation-delay: 0s;}
#landing-champu-romero .tbc-card:nth-child(2) .tbc-icon-wrap{animation-delay: 0.9s;}
#landing-champu-romero .tbc-card:nth-child(3) .tbc-icon-wrap{animation-delay: 1.8s;}
#landing-champu-romero .tbc-card:nth-child(5) .tbc-icon-wrap{animation-delay: 0s;}
#landing-champu-romero .tbc-card:nth-child(6) .tbc-icon-wrap{animation-delay: 0.9s;}
#landing-champu-romero .tbc-card:nth-child(7) .tbc-icon-wrap{animation-delay: 1.8s;}
@keyframes tbc-pulse{
    0%, 100% {
      transform: translateY(0) scale(1);
      box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.08);
    }
    45% {
      transform: translateY(-5px) scale(1.07);
      box-shadow: 0 12px 24px rgba(0,0,0,0.13), 0 4px 8px rgba(0,0,0,0.09);
    }
  }
#landing-champu-romero .tbc-card:hover .tbc-icon-wrap{animation-play-state: paused;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 14px 28px rgba(0,0,0,0.16), 0 4px 10px rgba(0,0,0,0.10);}
#landing-champu-romero .tbc-card.tbc-active .tbc-icon-wrap{animation-play-state: paused;
    background: #111;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 24px rgba(0,0,0,0.22), 0 4px 8px rgba(0,0,0,0.14);}
#landing-champu-romero .tbc-icon-wrap svg{stroke: #222; transition: stroke 0.25s;}
#landing-champu-romero .tbc-card.tbc-active .tbc-icon-wrap svg{stroke: #fff;}
#landing-champu-romero .tbc-label{font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #222;
    text-align: center;
    line-height: 1.3;}
#landing-champu-romero .tbc-dot{width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ddd;
    transition: background 0.25s, transform 0.25s;}
#landing-champu-romero .tbc-card.tbc-active .tbc-dot{background: #111;
    transform: scale(1.4);}
#landing-champu-romero .tbc-panel-area{overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease;}
#landing-champu-romero .tbc-panel-area.tbc-open{max-height: 160px;
    opacity: 1;}
#landing-champu-romero .tbc-panel{display: none;
    gap: 14px;
    background: #111;
    border-radius: 18px;
    padding: 16px 20px;
    margin: 12px 4px 4px;
    animation: tbc-slidein 0.4s cubic-bezier(0.34,1.56,0.64,1);
    align-items: center;}
#landing-champu-romero .tbc-panel.tbc-visible{display: flex;}
@keyframes tbc-slidein{
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
#landing-champu-romero .tbc-panel-icon{width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);}
#landing-champu-romero .tbc-panel-icon svg{stroke: #fff;}
#landing-champu-romero .tbc-panel-body{flex: 1;}
#landing-champu-romero .tbc-panel-title{font-size: 12px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 5px;}
#landing-champu-romero .tbc-panel-desc{font-size: 12px;
    color: rgba(255,255,255,0.65);
    margin: 0;
    line-height: 1.55;}
#landing-champu-romero .tbc-panel-close{background: none;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
    align-self: flex-start;
    padding: 0;
    line-height: 1;}
#landing-champu-romero .tbc-panel-close:hover{background: rgba(255,255,255,0.1);
    color: #fff;}
#landing-champu-romero .cl-orelvie-urgency-wrapper,#landing-champu-romero .cl-orelvie-benefits-container,#landing-champu-romero .cl-orelvie-trustfaq,#landing-champu-romero .cl-orelvie-trustfaq-container{width:auto !important;
  margin-left:15px !important;
  margin-right:15px !important}
#landing-champu-romero{--cl-ticker-logo-h:26px;
  --cl-ticker-logo-h-mob:20px}


/* 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-champu-romero, #landing-champu-romero *{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-champu-romero{--boton:#1F3A2C; --boton-hondo:#12251B}

#landing-champu-romero{margin:0 auto; background:#FFFFFF}
#landing-champu-romero .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-champu-romero .costura{height:52px; margin-top:-52px}
#landing-champu-romero .bloque{position:relative}
#landing-champu-romero .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-champu-romero #arriba::before{display:none}
#landing-champu-romero .bloque:first-of-type:not(#arriba)::before{display:block}
#landing-champu-romero .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-champu-romero .barra, .barra{display:none !important}
#landing-champu-romero{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-champu-romero). 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-champu-romero{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-champu-romero .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-champu-romero .tira, #landing-champu-romero .faja{background:var(--fondo,#FFFFFF)}
#np-comprar{scroll-margin-top:90px; display:block; height:0}
#landing-champu-romero .np-respiro{height:80px}

#landing-champu-romero .np-variantes{padding-top:22px; padding-bottom:28px}
#landing-champu-romero .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-champu-romero .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-champu-romero .np-viral__fuego{font-size:14px; line-height:1}
#landing-champu-romero .np-viral__texto{
  font-weight:600; opacity:.85; letter-spacing:.02em;
}
#landing-champu-romero .np-viral__red{
  display:inline-flex; align-items:center; gap:5px;
  font-weight:800; letter-spacing:.01em;
}
#landing-champu-romero .np-viral__red + .np-viral__red{
  margin-left:2px; padding-left:10px;
  border-left:1px solid var(--borde, rgba(0,0,0,.18));
}
#landing-champu-romero .np-viral__red svg{display:block; flex:0 0 auto}

@media (max-width:380px){
  #landing-champu-romero .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-champu-romero .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-champu-romero .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-champu-romero .np-social__texto{
  font-size:12.5px; color:var(--tinta-suave); letter-spacing:.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#landing-champu-romero .np-social__texto b{color:var(--tinta); font-weight:800}
#landing-champu-romero .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-champu-romero .np-muestras{display:flex; gap:14px; flex-wrap:wrap}
#landing-champu-romero .np-muestra{
  position:relative; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
#landing-champu-romero .np-muestra input{position:absolute; opacity:0; pointer-events:none}
#landing-champu-romero .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-champu-romero .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-champu-romero .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-champu-romero .np-muestra input:checked ~ .np-muestra__nombre{
  color:var(--tinta); font-weight:700;
}
#landing-champu-romero .np-muestra__tono[data-tono="palo-de-rosa"]{background:#C18B87}
#landing-champu-romero .np-muestra__tono[data-tono="azul"]{background:#5D7091}
#landing-champu-romero .np-muestra__tono[data-tono="crema"]{background:#EDE2CE}
#landing-champu-romero .np-muestra__tono[data-tono="gris"]{background:#5E5E5E}
#landing-champu-romero .np-muestra__tono[data-tono="cafe"]{background:#B5722F}
#landing-champu-romero .np-muestra__tono[data-tono="blanco"]{background:#F6F4EF}
#landing-champu-romero .np-muestra__tono[data-tono="rojo"]{background:#B8272E}
#landing-champu-romero .np-muestra__tono[data-tono="negro"]{background:#1C1C1C}
#landing-champu-romero .np-muestra__tono[data-tono="beige"]{background:#D9C7A7}
#landing-champu-romero .np-muestra__tono[data-tono="miel"]{background:#C68A3F}
#landing-champu-romero .np-muestra__tono[data-tono="rosado"]{background:#E8A2B8}
#landing-champu-romero .np-muestra__tono[data-tono="verde"]{background:#4E7A44}
#landing-champu-romero .np-muestra__tono[data-tono="vinotinto"]{background:#6E1F2C}

/* --- talla: selector de borde a borde --- */
#landing-champu-romero .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-champu-romero .np-talla{position:relative; cursor:pointer; display:flex}
#landing-champu-romero .np-talla input{position:absolute; opacity:0; pointer-events:none}
#landing-champu-romero .np-talla + .np-talla span{border-left:1.5px solid var(--borde,#D5DCE4)}
#landing-champu-romero .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-champu-romero .np-talla input:checked + span{
  background:var(--boton); color:#fff; border-left-color:var(--boton);
}
#landing-champu-romero .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-champu-romero .np-cabecera{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin:0 0 4px;
}
#landing-champu-romero .np-cabecera--sec{
  align-items:center; margin:0 0 16px;
}
#landing-champu-romero .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-champu-romero .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-champu-romero .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-champu-romero .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-champu-romero .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-champu-romero .np-variantes{padding-left:22px; padding-right:22px}

/* CONTADOR STICKY: barra de oferta que sigue toda la landing */
#landing-champu-romero .np-cuenta__hueco{height:48px}
#landing-champu-romero .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, #1F3A2C 0%, #12251B 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-champu-romero .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-champu-romero .np-cuenta::after{animation:none; display:none} }

/* zona izquierda: la oferta */
#landing-champu-romero .np-cuenta__deal{display:inline-flex; align-items:center; gap:8px; position:relative; z-index:1; min-width:0}
#landing-champu-romero .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-champu-romero .np-cuenta__precio{display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap; flex:0 0 auto}
#landing-champu-romero .np-cuenta__antes{font-size:11px; opacity:.72; text-decoration:line-through}
#landing-champu-romero .np-cuenta__ahora{font-size:15.5px; font-weight:900; letter-spacing:-.02em}
#landing-champu-romero .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-champu-romero .np-cuenta__envio{
  font-weight:800; font-size:11px; line-height:1.1; text-transform:uppercase;
  letter-spacing:.02em; white-space:nowrap;
}
#landing-champu-romero .np-cuenta__envio b{color:#FFE9B0; font-weight:900}
/* segunda linea: dice que la oferta no se repite, no solo que hay reloj */
#landing-champu-romero .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-champu-romero .np-cuenta__timer{display:inline-flex; align-items:center; gap:4px; position:relative; z-index:1; flex:0 0 auto}
#landing-champu-romero .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-champu-romero .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-champu-romero .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-champu-romero .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-champu-romero .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-champu-romero .np-cuenta__antes{display:none} }
@media (max-width:369px){ #landing-champu-romero .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-champu-romero .np-urgencia{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:6px -22px 20px; padding:11px 16px;
  background:linear-gradient(90deg,
    rgba(31,58,44,.08) 0%, rgba(31,58,44,.16) 50%, rgba(31,58,44,.08) 100%);
  border-top:1px solid rgba(31,58,44,.20);
  border-bottom:1px solid rgba(31,58,44,.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-champu-romero .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-champu-romero .np-gente{width:18px; height:18px; color:var(--tinta); flex:0 0 auto}
#landing-champu-romero .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-champu-romero .np-vivo{animation:none} }
#landing-champu-romero .np-lote{margin:14px auto 0; max-width:360px; text-align:center}
#landing-champu-romero .np-stock{
  height:4px; border-radius:999px; margin:0 0 7px;
  background:var(--borde,var(--borde,#D5DCE4)); overflow:hidden;
}
#landing-champu-romero .np-stock__fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, #1F3A2C, #12251B);
  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-champu-romero .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(31,58,44,.24) 0%, rgba(31,58,44,.08) 100%);
  border:1.5px solid rgba(31,58,44,.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-champu-romero .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-champu-romero .np-stock__aviso::after{display:none} }
/* el numero va en su propia ficha roja: se lee de lejos */
#landing-champu-romero .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-champu-romero .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-champu-romero .np-stock__txt{
  font-size:11.5px; font-weight:600; color:var(--tinta); line-height:1.3;
}
#landing-champu-romero .np-stock__baja{
  font-size:10.5px; font-weight:600; color:var(--boton);
  opacity:0; transition:opacity .35s ease;
}
#landing-champu-romero .np-stock__baja.visible{opacity:1}
#landing-champu-romero .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-champu-romero .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-champu-romero .np-rating__score{display:flex; align-items:center; gap:13px; margin-bottom:14px}
#landing-champu-romero .np-rating__score > b{font-size:44px; font-weight:900; line-height:.85; letter-spacing:-.03em; color:var(--tinta)}
#landing-champu-romero .np-rating__stars{color:#F5A623; font-size:16px; letter-spacing:2px}
#landing-champu-romero .np-rating__base{display:block; font-size:11.5px; color:var(--tinta-suave); margin-top:4px}
#landing-champu-romero .np-rating__bars{display:grid; gap:6px}
#landing-champu-romero .np-rating__row{display:grid; grid-template-columns:28px 1fr 36px; align-items:center; gap:9px; font-size:11px; color:var(--tinta-suave)}
#landing-champu-romero .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-champu-romero .np-rating__track{height:7px; border-radius:999px; background:rgba(22,24,28,.10); overflow:hidden}
#landing-champu-romero .np-rating__track b{display:block; height:100%; min-width:0; border-radius:999px; background:var(--boton)}
#landing-champu-romero .np-rating__track b[style="width:0%"]{background:transparent}
#landing-champu-romero .np-rating__row em{text-align:right; font-variant-numeric:tabular-nums; font-style:normal}
#landing-champu-romero .np-rating__hi{
  margin-top:14px; display:flex; align-items:center; gap:11px;
  background:rgba(31,58,44,.07); border:1px solid rgba(31,58,44,.18);
  border-radius:12px; padding:11px 13px; font-size:13px; color:var(--tinta);
  text-align:left; line-height:1.3;
}
#landing-champu-romero .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(31,58,44,.35);
}
#landing-champu-romero .np-rating__hi-ico svg{width:15px; height:15px; stroke:#fff; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
#landing-champu-romero .np-rating__hi b{color:var(--boton-hondo); font-weight:800}
#landing-champu-romero .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-champu-romero .np-talla span{flex-direction:column; gap:3px}
#landing-champu-romero .np-talla__precio{
  font-size:12.5px; font-weight:800; opacity:.85; letter-spacing:-.01em;
}
#landing-champu-romero .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-champu-romero .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-champu-romero .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-champu-romero .np-packs-fold__resumen::-webkit-details-marker{display:none}
#landing-champu-romero .np-packs-fold__izq{display:flex; align-items:center; gap:11px; min-width:0}
#landing-champu-romero .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-champu-romero .np-packs-fold__foto img{width:100%; height:100%; object-fit:cover; display:block}
#landing-champu-romero .np-packs-fold__txt{display:flex; flex-direction:column; gap:2px; min-width:0}
#landing-champu-romero .np-packs-fold__elegido{
  font-size:15.5px; font-weight:800; color:var(--tinta); line-height:1.2;
}
#landing-champu-romero .np-packs-fold__elegido b{color:var(--boton)}
/* solo el triangulo, grandecito: el "Cambiar" sobraba */
#landing-champu-romero .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-champu-romero .np-packs-fold__cambiar::after{content:'▾'; font-size:22px; line-height:1}
#landing-champu-romero .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-champu-romero .np-packs-fold__resumen,
#landing-champu-romero .np-packs-fold__resumen:hover,
#landing-champu-romero .np-packs-fold__resumen:active,
#landing-champu-romero .np-packs-fold[open] .np-packs-fold__resumen{
  color:var(--tinta) !important; background:transparent !important;
}
#landing-champu-romero .np-packs-fold__elegido,
#landing-champu-romero .np-packs-fold__resumen:hover .np-packs-fold__elegido,
#landing-champu-romero .np-packs-fold__resumen:active .np-packs-fold__elegido{
  color:var(--tinta) !important;
}

/* insignia "Mas elegido" tambien en el resumen plegado */
#landing-champu-romero .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-champu-romero .np-packs-fold[open] .np-packs-fold__resumen{
  border-bottom:1px solid var(--borde,rgba(0,0,0,.12));
}
#landing-champu-romero .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-champu-romero .np-packs{display:grid; gap:8px}
#landing-champu-romero .np-pack{position:relative; cursor:pointer; display:block}
#landing-champu-romero .np-pack input{position:absolute; opacity:0; pointer-events:none}
#landing-champu-romero .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-champu-romero .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-champu-romero .np-pack__foto img{
  width:100%; height:100%; object-fit:cover; display:block;
}
#landing-champu-romero .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-champu-romero .np-pack__nombre{
  font-size:14px; font-weight:800; color:var(--tinta); letter-spacing:-.01em;
  line-height:1.15;
}
#landing-champu-romero .np-pack__precios{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
#landing-champu-romero .np-pack__ahora{
  font-size:18px; font-weight:900; color:var(--tinta); letter-spacing:-.02em;
}
#landing-champu-romero .np-pack__antes{
  font-size:11.5px; color:var(--tinta-suave); text-decoration:line-through;
}
#landing-champu-romero .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-champu-romero .np-pack--solo{cursor:default}
#landing-champu-romero .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-champu-romero .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-champu-romero .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-champu-romero .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-champu-romero .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-champu-romero .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-champu-romero .np-cantidad,
#landing-champu-romero quantity-selector,
#landing-champu-romero .quantity,
#landing-champu-romero .quantity__input,
#landing-champu-romero .product-form__quantity,
#landing-champu-romero [class*="quantity-selector"],
#landing-champu-romero [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-champu-romero .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-champu-romero .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-champu-romero .np-pack input:checked + .np-pack__caja .np-pack__marca{
  background:var(--boton); border-color:var(--boton);
}
#landing-champu-romero .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-champu-romero .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-champu-romero .np-pack__cinta--urgente{
  background:var(--boton);
}
@media (max-width:360px){
  #landing-champu-romero .np-pack__foto{width:70px; height:70px}
  #landing-champu-romero .np-pack__nombre{font-size:14.5px}
  #landing-champu-romero .np-pack__ahora{font-size:17.5px}
}

/* estrella "vacia" para las reseñas que no son 5 perfectas */
#landing-champu-romero [class$="__estrellas"] .v{opacity:.30}
#landing-champu-romero [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-champu-romero a.boton[data-abriendo],
#landing-champu-romero .np-barra a[data-abriendo],
#landing-champu-romero .np-barra button[data-abriendo]{
  pointer-events:none; opacity:.72; position:relative}
#landing-champu-romero a.boton[data-abriendo]::after,
#landing-champu-romero .np-barra a[data-abriendo]::after,
#landing-champu-romero .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-champu-romero .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-champu-romero .np-barra.visible{transform:translateX(-50%) translateY(0)}
#landing-champu-romero .np-barra__precio{line-height:1.12; flex:0 0 auto}
#landing-champu-romero .np-barra__antes{
  display:block; font-size:11px; color:var(--tinta-suave); text-decoration:line-through;
}
#landing-champu-romero .np-barra__ahora{display:block; font-size:18px; font-weight:900; color:var(--tinta)}
#landing-champu-romero .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, #1F3A2C 0%, #12251B 100%);
  box-shadow:0 8px 20px rgba(31,58,44,.42);
}
#landing-champu-romero .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-champu-romero .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-champu-romero #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-champu-romero #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-champu-romero #np-boton.oculto{display:none !important}

/* mas esbelto: antes iba con 19px de relleno y se veia gordo */
#landing-champu-romero .np-boton-real,
#landing-champu-romero .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, #1F3A2C 0%, #12251B 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(31,58,44,.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-champu-romero .np-boton-real small,
#landing-champu-romero .np-boton-real span:not(:first-child){
  font-size:12px !important; font-weight:500 !important; opacity:.85 !important;
}
#landing-champu-romero .np-boton-real:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 14px 32px rgba(31,58,44,.46) !important;
}
#landing-champu-romero .np-boton-real:active{transform:translateY(0) !important}
#landing-champu-romero .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-champu-romero .np-boton-real svg, #landing-champu-romero .np-boton-real img, #landing-champu-romero .np-boton-real i,
#landing-champu-romero :has(> .np-boton-real) > svg, #landing-champu-romero :has(> .np-boton-real) > img, #landing-champu-romero :has(> .np-boton-real) > i{
  display:none !important;
}

@keyframes np-latido{
  0%,100%{box-shadow:0 10px 26px rgba(31,58,44,.36)}
  50%{box-shadow:0 10px 34px rgba(31,58,44,.58)}
}
@media (prefers-reduced-motion:reduce){
  #landing-champu-romero .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}