/* ============================================
   REVIEWS SECTION
   ============================================ */
.reviews {
    position: relative;
    width: 100%;
    min-height: 480px;
    background: var(--ivb-crema);
    padding: 104px 0;
    overflow: hidden;
}

.reviews__background {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.reviews__background img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -62%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: none;
    object-fit: cover;
    z-index: 0;
}

.reviews__container {
    position: relative;
    z-index: 1;
    margin-left: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.reviews__viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.reviews__track {
    display: flex;
    gap: 24px;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.review-card {
    backdrop-filter: blur(9.7px);
    background: rgba(194,202,212,0.82);
    border-radius: 8px;
    width: 464px;
    height: 254px;
    min-width: 464px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 36px;
    gap: 7px;
    box-sizing: border-box;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.review-card__author {
    font-family: var(--font-mono);
    font-size: 18px;
    text-transform: uppercase;
    color: var(--ivb-casi-negro);
    letter-spacing: 0;
    line-height: 1.4;
    font-weight: 400;
}

.review-card__stars {
    width: 100px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-card__stars img {
    width: 100%;
    height: 100%;
}

.review-card__text {
    font-family: var(--font-primary);
    font-size: 18px;
    color: var(--ivb-casi-negro);
    line-height: 1.2;
    font-weight: 400;
    max-width: 392px;
}

.review-card__location {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--ivb-crema);
    letter-spacing: 0;
    line-height: 1.4;
    font-weight: 400;
}

.reviews__controls {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.reviews__arrow {
    background: var(--ivb-punch);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(39,58,79,0.08);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.reviews__arrow:hover {
    background: #bef05e;
    transform: scale(1.05);
}

.reviews__arrow img {
    width: 18px;
    height: 21px;
}

.reviews__arrow--prev img {
    transform: rotate(90deg);
}

.reviews__arrow--next img {
    transform: rotate(-90deg);
}

/* ============================================
   IVB Wellness Lab - Landing Page Magnesio
   ============================================ */

/* ----- Variables CSS ----- */
:root {
    /* Colores */
    --ivb-casi-negro: #273a4f;
    --ivb-oscuro: #607287;
    --ivb-crema: #fbf8f2;
    --ivb-punch: #cdff71;
    --ivb-gris-claro: #c2cad4;
    --ivb-gris-medio: #9baabd;
    --ivb-gris-suave: #ededed;
    --ivb-fondo: linear-gradient(180deg, rgba(194, 202, 212, 0.8) 0%, rgba(194, 202, 212, 0) 26.52%), 
                 linear-gradient(90deg, rgba(194, 202, 212, 0.35) 0%, rgba(194, 202, 212, 0.35) 100%);
    
    /* Tipografía */
    --font-primary: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
    
    /* Espaciado */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 40px;
    --spacing-2xl: 46px;
    --spacing-3xl: 64px;
}

/* ----- Reset básico ----- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: 1.4;
    color: var(--ivb-casi-negro);
    background-color: var(--ivb-gris-medio);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
}

/* ============================================
   SIDEBAR MENU - Navegación Lateral Sticky
   ============================================ */
.sidebar-menu {
    position: fixed;
    left: 0;
    top: 0;
    background-color: var(--ivb-crema);
    z-index: 1000;
    border-right: 1px solid var(--ivb-gris-medio);
    border-bottom: 1px solid var(--ivb-gris-medio);
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 1000px;
}

.sidebar-menu__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    background-color: var(--ivb-crema);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ivb-gris-medio);
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    box-sizing: border-box;
}

.sidebar-menu__item:not(:first-child) {
    border-bottom: 1px solid var(--ivb-gris-medio);
}

.sidebar-menu__item:hover {
    background-color: rgba(155, 170, 189, 0.1);
    color: var(--ivb-oscuro);
}

.sidebar-menu__item--active {
    background-color: var(--ivb-punch);
    color: var(--ivb-casi-negro);
}

.sidebar-menu__item--active:hover {
    background-color: #bef05e;
}

/* Reducir padding en pantallas pequeñas */
@media (max-width: 1200px) {
    .sidebar-menu__item {
        padding: 12px 12px;
    }
}

@media (max-width: 1200px) {
    .sidebar-menu__item {
        padding: 12px 12px;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
  #comparacion .comparison__title {
    padding-left: 32px;
  }
  .hero__content .hero__subtitle {
    padding-left: 24px;
  }
  body .faq {
    padding: 104px 56px;
  }
  #dosage .dosage__title.dosage__title--desktop {
    padding-left: 24px;
  }
}


/* Reducir padding vertical cuando la altura es limitada */
@media (max-height: 820px) {
    .sidebar-menu__item {
        padding: 10px 24px;
    }
}

@media (max-height: 820px) and (max-width: 1200px) {
    .sidebar-menu__item {
        padding: 10px 12px;
    }
}

@media (max-height: 760px) {
    .sidebar-menu__item {
        padding: 8px 24px;
    }
}

@media (max-height: 760px) and (max-width: 1200px) {
    .sidebar-menu__item {
        padding: 8px 12px;
    }
}

/* Ocultar menú lateral y mostrar mobile en pantallas con poca altura */
@media (max-height: 729px) {
    .sidebar-menu {
        display: none;
    }
    
    .mobile-header {
        display: flex !important;
    }
}

/* Simplificar barra de producto en pantallas intermedias */
@media (max-width: 1100px) and (min-width: 769px) {
    .hero__product-bar {
        gap: 24px;
        padding: 16px 24px;
    }
    
    .hero__product-right {
        display: none;
    }
}

/* ============================================
   MOBILE HEADER - Solo visible en móvil
   ============================================ */
.mobile-header {
    display: none;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: none;
    background: var(--ivb-gris-medio);
    border: none;
    border-radius: 8px;
    box-shadow: 0px 4.76px 9.519px 0px rgba(96, 114, 135, 0.1);
    padding: 8px 12px;
    z-index: 1000;
    justify-content: space-between;
    align-items: center;
}

.mobile-header__logo img {
    height: 40px;
    width: auto;
}

.mobile-header__menu-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.mobile-header__menu-text {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 500;
    color: var(--ivb-casi-negro);
    text-transform: uppercase;
}

.mobile-header__menu-arrow {
    width: 12px;
    height: 24px;
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}

.mobile-header__menu-btn.is-open .mobile-header__menu-arrow {
    transform: rotate(-90deg);
}

/* Header abierto - quitar border-radius inferior y border-bottom */
.mobile-header.is-open {
    border-radius: 8px 8px 0 0;
    border-bottom: none;
}

/* Mobile Nav Dropdown */
.mobile-nav {
    display: none;
    position: fixed;
    top: 75px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: none;
    background: var(--ivb-gris-medio);
    border: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0px 4px 20px rgba(96, 114, 135, 0.15);
    z-index: 999;
    flex-direction: column;
    align-items: flex-end;
    padding: 8px 14px 10px;
    overflow: hidden;
}

.mobile-nav.is-open {
    display: flex;
}

.mobile-nav__item {
    display: block;
    padding: 12px 0;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 500;
    color: var(--ivb-oscuro);
    text-decoration: none;
    text-transform: uppercase;
    text-align: right;
    border-bottom: none;
    transition: color 0.2s ease;
}

.mobile-nav__item:last-child {
    border-bottom: none;
}

.mobile-nav__item:hover,
.mobile-nav__item--active {
    background-color: transparent;
    color: var(--ivb-casi-negro);
}

ul {
    list-style: none;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-3xl);
    background: var(--ivb-fondo);
    overflow: hidden;
}

.hero__bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* ----- Header / Logo ----- */
.hero__header {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.hero__logo {
    display: block;
}

.hero__logo img {
    width: 80px;
    height: auto;
}

/* ----- Contenido principal ----- */
.hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-2xl);
    margin-bottom: 96px;
    position: relative;
    z-index: 1;
}

/* ----- Video container ----- */
.hero__video-container {
    position: relative;
    margin: 0;
}

.hero__video-button {
    position: relative;
    width: 280px;
    height: 370px;
    display: block;
}

/* Móviles */
.hero__phone {
    position: absolute;
    width: 190px;
    height: 390px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 30px;
    overflow: hidden;
}

.hero__phone-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.hero__phone-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 94%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    z-index: 1;
}

.hero__phone--front {
    bottom: 0;
    left: 0;
    z-index: 2;
}

.hero__phone--back {
    top: 0;
    right: 0;
    z-index: 1;
    transform: rotate(3deg);
}

/* Estado intercambiado */
.hero__video-button.swapped .hero__phone--front,
.hero__video-wrapper.swapped .hero__phone--front {
    bottom: auto;
    top: 0;
    left: auto;
    right: 0;
    z-index: 1;
    transform: rotate(3deg);
}

.hero__video-button.swapped .hero__phone--back,
.hero__video-wrapper.swapped .hero__phone--back {
    top: auto;
    bottom: 0;
    right: auto;
    left: 0;
    z-index: 2;
    transform: rotate(0deg);
}

.hero__badge {
    position: absolute;
    top: 28%;
    right: -10px;
    background-color: var(--ivb-punch);
    color: var(--ivb-oscuro);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    transform: rotate(-11deg);
    z-index: 10;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.hero__video-button:hover .hero__badge {
    transform: rotate(-11deg) scale(1.05);
}

/* ----- Texto hero ----- */
.hero__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    text-align: center;
    margin-top: 24px;
}

.hero__title {
    font-size: 80px;
    font-weight: 400;
    line-height: 1;
    color: var(--ivb-casi-negro);
}

.hero__subtitle {
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ivb-crema);
    margin-top: var(--spacing-sm);
}

.hero__description {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ivb-oscuro);
}

/* ----- Botón scroll ----- */
.hero__scroll-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--ivb-punch);
    border-radius: 50%;
    color: var(--ivb-casi-negro);
    transition: transform 0.3s ease;
}

.hero__scroll-button:hover {
    transform: translateY(4px);
}

.hero__scroll-button svg {
    width: 18px;
    height: 22px;
}

/* ----- Barra de producto ----- */
.hero__product-bar {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 48px;
    background-color: #ededed;
    padding: 20px 36px;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(96, 114, 135, 0.1);
    z-index: 100;
}

.hero__product-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hero__product-image {
    margin: 0;
    flex-shrink: 0;
    width: 52px;
    height: 65px;
    border-radius: 10px;
    overflow: hidden;
}

.hero__product-image img {
    width: 150%;
    height: auto;
    margin-left: -25%;
    margin-top: -6%;
}

.hero__product-name {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--ivb-casi-negro);
    line-height: 1;
    white-space: nowrap;
}

.hero__product-right {
    display: flex;
    align-items: center;
    gap: 19px;
}

.hero__product-price {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--ivb-casi-negro);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.hero__product-details {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    color: var(--ivb-casi-negro);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.hero__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    background-color: var(--ivb-punch);
    color: var(--ivb-casi-negro);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 12px 24px;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.hero__cta-button:hover {
    background-color: #bef05e;
    transform: scale(1.02);
}

/* ============================================
   MAIN CONTENT (placeholder para secciones)
   ============================================ */
main {
    width: 100%;
}

/* ============================================
   SECCIÓN INTRO
   ============================================ */
.intro {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 104px 40px;
    background-color: var(--ivb-punch);
}

.intro__text {
    max-width: 656px;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    color: var(--ivb-casi-negro);
}

.intro__text strong {
    font-weight: 700;
}

/* ============================================
   SECCIÓN BENEFITS (En qué puede ayudarte)
   ============================================ */
.benefits {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 104px 160px 96px;
    background-color: var(--ivb-crema);
}

.benefits__container {
    display: flex;
    align-items: center;
    gap: 109px;
}

/* ----- Cuerpo con pain points ----- */
.benefits__body {
    position: relative;
    width: 366px;
    height: 564px;
    flex-shrink: 0;
    margin: 0;
}

.benefits__body-image {
    position: absolute;
    top: 2.3%;
    left: 24%;
    width: 53%;
    height: 100%;
}

/* Pain points */
.benefits__point {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

/* Efecto de borrón (blur) alrededor */
.benefits__point::before {
    content: '';
    position: absolute;
    width: 160%;
    height: 160%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(155, 170, 189, 0.8) 0%, rgba(155, 170, 189, 0) 60%);
    transition: background 0.3s ease;
}

/* Círculo interno */
.benefits__point-inner {
    width: 40%;
    height: 40%;
    border-radius: 50%;
    border: 2px solid rgba(155, 170, 189, 0.6);
    background-color: transparent;
    transition: all 0.3s ease;
    z-index: 1;
}

/* Hover: círculo se encoge y borrón cambia a verde */
.benefits__point:hover .benefits__point-inner {
    transform: scale(0.8);
    border-color: var(--ivb-punch);
}

.benefits__point:hover::before {
    background: radial-gradient(circle, rgba(205, 255, 113, 0.8) 0%, rgba(205, 255, 113, 0) 60%);
}

/* Estado activo: círculo relleno verde y borrón verde */
.benefits__point.active::before {
    background: radial-gradient(circle, rgba(205, 255, 113, 0.8) 0%, rgba(205, 255, 113, 0) 60%);
}

.benefits__point.active .benefits__point-inner {
    border-color: var(--ivb-punch);
    background-color: var(--ivb-punch);
}

/* Posiciones de los pain points */
.benefits__point--head {
    top: 1.24%;
    left: calc(50% + 27px);
    transform: translateX(-50%);
}

.benefits__point--shoulder-right {
    top: 11.7%;
    left: calc(50% - 18px);
    transform: translateX(-50%);
}

.benefits__point--shoulder-left {
    top: 23%;
    left: calc(50% + 22px);
    transform: translateX(-50%);
}

.benefits__point--heart {
    top: 25%;
    left: calc(50% - 55px);
    transform: translateX(-50%);
}

.benefits__point--legs {
    top: 67.5%;
    left: calc(50% - 23px);
    transform: translateX(-50%);
}

/* ----- Info y carrusel ----- */
.benefits__info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 538px;
    flex-shrink: 0;
}

.benefits__title {
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ivb-casi-negro);
    max-width: 455px;
}

.benefits__title--mobile {
    display: none;
}

.benefits__title--desktop {
    display: block;
}

/* Navegación carrusel */
.benefits__nav {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.benefits__nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--ivb-punch);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.benefits__nav-btn:hover {
    background-color: #bef05e;
    transform: scale(1.05);
}

.benefits__nav-btn--prev img {
    transform: rotate(90deg);
}

.benefits__nav-btn--next img {
    transform: rotate(-90deg);
}

.benefits__nav-btn img {
    width: 18px;
    height: 21px;
}

/* Carrusel de cards */
.benefits__carousel {
    position: relative;
    width: 455px;
    height: 280px;
}

.benefits__card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 40px;
    background-color: var(--ivb-punch);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.benefits__card.active {
    opacity: 1;
    visibility: visible;
}

.benefits__card-icon {
    width: 48px;
    height: 48px;
    margin: 0;
}

.benefits__card-icon img {
    width: 100%;
    height: 100%;
}

.benefits__card-title {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--ivb-casi-negro);
}

.benefits__card-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ivb-casi-negro);
}

/* Card header y flecha - desktop oculta la flecha */
.benefits__card-header {
    display: contents;
}

.benefits__card-arrow {
    display: none;
    width: 22px;
    height: 19px;
    cursor: pointer;
    background: transparent;
    transition: transform 0.2s ease;
}

.benefits__card-arrow img {
    width: 100%;
    height: 100%;
}

/* ============================================
   RESULTS SECTION
   ============================================ */
.results {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    padding: 104px 40px;
    overflow: hidden;
}

/* Background images container */
.results__backgrounds {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.results__bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.results__bg-image--active {
    opacity: 1;
}

.results__bg-image--1 {
    background-image: url('../assets/images/results-bg.jpg');
}

.results__bg-image--2 {
    background-image: url('../assets/images/results-bg.jpg');
}

.results__bg-image--3 {
    background-image: url('../assets/images/results-bg.jpg');
}

.results::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(96, 114, 135, 0.9);
    pointer-events: none;
    z-index: 1;
}

.results > *:not(.results__backgrounds) {
    position: relative;
    z-index: 2;
}

.results__title {
    font-family: var(--font-primary);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    color: var(--ivb-crema);
    max-width: 1358px;
}

/* Timeline */
.results__timeline {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

.results__timeline-line {
    position: absolute;
    top: 39px;
    left: 42px; /* Empieza desde el centro del primer punto */
    right: -50vw; /* Se extiende hasta el final del viewport */
    height: 1px;
    background-color: var(--ivb-gris-claro);
    z-index: 0;
}

.results__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 85px;
    background: none;
    border: none;
    cursor: pointer;
}

.results__step-label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    text-align: center;
    color: var(--ivb-gris-claro);
    transition: color 0.3s ease;
}

.results__step--active .results__step-label {
    color: var(--ivb-punch);
}

.results__step-indicator {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.results__step-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--ivb-punch);
    transition: transform 0.3s ease;
}

.results__step-ring {
    position: absolute;
    inset: 0;
    border: 1px solid var(--ivb-punch);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.results__step--active .results__step-ring {
    opacity: 1;
    transform: scale(1);
}

.results__step:hover:not(.results__step--active) .results__step-dot {
    transform: scale(1.15);
}

/* Content Lists */
.results__content {
    position: relative;
    width: 500px;
    min-height: 170px;
}

.results__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.results__list--active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

.results__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.results__check {
    width: 22px;
    height: 15px;
    flex-shrink: 0;
}

.results__text {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    color: var(--ivb-crema);
}

/* Header del contenido - oculto en desktop, visible en mobile */
.results__content-header {
    display: none;
}

.results__content-title {
    display: none;
}

.results__content-arrow {
    display: none;
}

/* ============================================
   COMPARISON SECTION
   ============================================ */
.comparison {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 104px 0;
    background-color: var(--ivb-gris-claro);
}

.comparison__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 1124px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.comparison__title {
    font-family: var(--font-primary);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ivb-casi-negro);
}

/* Tabs Container */
.comparison__tabs-container {
    display: flex;
    flex-direction: column;
    max-width: 1092px;
}

.comparison__tabs {
    display: flex;
}

.comparison__tab {
    flex: 1;
    padding: 20px 48px;
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--ivb-casi-negro);
    background-color: var(--ivb-gris-suave);
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.comparison__tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 3px;
    background-color: var(--ivb-punch);
    transition: transform 0.3s ease;
}

.comparison__tab:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.comparison__tab:nth-child(1) {
    background-color: var(--ivb-gris-medio);
}

.comparison__tab:nth-child(2) {
    background-color: #b8c3d1;
}

.comparison__tab:nth-child(3) {
    background-color: var(--ivb-gris-suave);
}

.comparison__tab:hover {
    color: var(--ivb-crema);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.comparison__tab--active:nth-child(1),
.comparison__tab:nth-child(1):hover {
    background-color: var(--ivb-gris-medio);
}

.comparison__tab--active:nth-child(2),
.comparison__tab:nth-child(2):hover {
    background-color: #b8c3d1;
}

.comparison__tab--active:nth-child(3),
.comparison__tab:nth-child(3):hover {
    background-color: var(--ivb-gris-suave);
}

.comparison__tab:nth-child(3):hover {
    color: var(--ivb-gris-medio);
    text-shadow: none;
}

.comparison__tab sup {
    font-size: 11px;
    vertical-align: super;
}

/* Panels */
.comparison__panel {
    background-color: var(--ivb-gris-medio);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.comparison__panel[hidden] {
    display: none;
}

.comparison__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 36px 75px 70px 75px;
}

/* Table */
.comparison__table-wrapper {
    background-color: #f7f7f7;
    border-radius: 8px;
    padding: 40px;
    flex-shrink: 0;
    width: 564px;
}

.comparison__table {
    width: 100%;
    border-collapse: collapse;
}

.comparison__table-header {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--ivb-oscuro);
    text-align: center;
    padding: 0 12px 30px;
    vertical-align: bottom;
}

.comparison__table-header--highlight {
    background-color: rgba(205, 255, 113, 0.64);
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    padding: 30px 12px;
}

.comparison__table-feature {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ivb-oscuro);
    padding: 15px 0;
    border-bottom: 1px solid #d9d9d9;
    width: 50%;
}

.comparison__table tbody tr:last-child .comparison__table-feature {
    border-bottom: none;
}

.comparison__table-cell {
    text-align: center;
    vertical-align: middle;
    padding: 15px 12px;
    border-bottom: 1px solid #d9d9d9;
}

.comparison__table tbody tr:last-child .comparison__table-cell {
    border-bottom: none;
}

.comparison__table-cell--highlight {
    background-color: rgba(205, 255, 113, 0.64);
}

.comparison__table tbody tr:last-child .comparison__table-cell--highlight {
    border-radius: 0 0 8px 0;
}

.comparison__icon {
    width: 26px;
    height: 26px;
    display: inline-block;
    vertical-align: middle;
}

/* Product Image */
.comparison__product-image {
    margin: 0;
    flex-shrink: 0;
}

.comparison__product-image img {
    height: 404px;
    width: auto;
}

/* Panel 2: Nuestra Fórmula */
.comparison__content--formula {
    background-color: var(--ivb-azul-claro);
    display: flex;
    gap: 40px;
    padding: 53px 60px;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 530px;
}

.comparison__formula-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 348px;
    flex-shrink: 0;
}

.comparison__formula-intro {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.18px;
    color: var(--ivb-casi-negro);
}

.comparison__formula-types {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comparison__formula-type {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.comparison__formula-icon {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
}

.comparison__formula-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.comparison__formula-type p {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.18px;
    color: var(--ivb-casi-negro);
}

.comparison__formula-type p strong {
    font-weight: 700;
}

.comparison__formula-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    max-width: 460px;
    min-width: 300px;
}

.comparison__formula-title {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.15;
    color: var(--ivb-casi-negro);
    text-transform: uppercase;
}

.comparison__formula-text {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.18px;
    color: var(--ivb-casi-negro);
}

.comparison__formula-badges {
    display: flex;
    justify-content: flex-start;
}

.comparison__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 80px;
    flex-shrink: 0;
    margin: 0 auto;
}

.comparison__badge-icon {
    width: 64px;
    height: 64px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.comparison__badge-icon img {
    width: 64px;
    height: 64px;
}

.comparison__badge-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.comparison__badge span {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--ivb-casi-negro);
    text-align: center;
    text-transform: uppercase;
}

.comparison__formula-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--ivb-punch);
    padding: 6px 12px;
    border-radius: 20px;
    width: fit-content;
}

.comparison__formula-link span {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ivb-casi-negro);
    text-transform: uppercase;
}

.comparison__formula-link img {
    width: 12px;
    height: 14px;
    transform: rotate(-90deg);
}

/* Panel 3: Por qué Albion */
.comparison__content--albion {
    background-color: #ebebeb;
    display: flex;
    gap: 40px;
    padding: 53px 60px;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 530px;
}

.comparison__albion-left {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 440px;
    flex-shrink: 0;
}

.comparison__albion-text {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.18px;
    color: var(--ivb-casi-negro);
}

.comparison__albion-text p {
    margin-bottom: 10px;
}

.comparison__albion-text p:last-child {
    margin-bottom: 0;
}

.comparison__albion-text strong {
    font-weight: 700;
}

.comparison__albion-images {
    position: relative;
    width: 438px;
    height: 414px;
    margin: 0;
    flex-shrink: 0;
}

.comparison__albion-img {
    position: absolute;
    width: 247px;
    height: 247px;
    border-radius: 8px;
    overflow: hidden;
}

.comparison__albion-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comparison__albion-img--top {
    top: 0;
    left: 0;
}

.comparison__albion-img--bottom {
    top: 136px;
    left: 183px;
}

/* ============================================
   DEFICIENCY SECTION
   ============================================ */
.deficiency {
    display: flex;
    height: 580px;
    justify-content: center;
}

.deficiency__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    width: 50%;
    padding: 40px 40px 40px 56px;
    background-color: var(--ivb-crema);
}

.deficiency__title {
    font-family: var(--font-primary);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ivb-casi-negro);
    max-width: 453px;
}

.deficiency__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 453px;
}

.deficiency__text p {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ivb-casi-negro);
}

.deficiency__image {
    width: 50%;
    margin: 0;
    overflow: hidden;
}

.deficiency__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}

/* ============================================
   INFO CARDS SECTION
   ============================================ */
.info-cards {
    display: flex;
    justify-content: center;
    padding: 104px 16px;
    background-color: var(--ivb-gris-claro);
    perspective: 1500px;
    overflow: hidden;
}

.info-cards__grid {
    display: flex;
    gap: 18px;
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.info-cards__grid::-webkit-scrollbar {
    display: none;
}

/* Individual Card - Flip Container */
.info-card {
    position: relative;
    width: 360px;
    height: 482px;
    flex-shrink: 0;
    scroll-snap-align: start;
    border: none;
    cursor: pointer;
    background: transparent;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.info-card--flipped {
    transform: rotateY(180deg);
}

/* Front Face */
.info-card__front {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.info-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.4s ease;
}

.info-card:hover:not(.info-card--flipped) .info-card__bg {
    transform: scale(1.05);
}

.info-card__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(39, 58, 79, 0.4);
    border-radius: 8px;
    transition: background-color 0.4s ease;
}

.info-card:hover:not(.info-card--flipped) .info-card__overlay {
    background-color: rgba(39, 58, 79, 0.65);
}

.info-card__title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.15;
    text-transform: uppercase;
    text-align: center;
    color: var(--ivb-punch);
    z-index: 1;
}

/* Back Face */
.info-card__back {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
    background-color: var(--ivb-gris-medio);
    display: flex;
    flex-direction: column;
    padding: 24px;
}

/* Card Síntomas - Lista con bullets */
.info-card__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ivb-crema);
    text-align: left;
}

.info-card__list li::before {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 9px;
    background-color: var(--ivb-punch);
    border-radius: 50%;
}

/* Card Factores - Grupos con tags */
.info-card__back--tagged {
    justify-content: space-between;
}

.info-card__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background-color: var(--ivb-punch);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ivb-casi-negro);
    width: fit-content;
}

.info-card__text {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ivb-crema);
    text-align: left;
}

/* Card Déficit - Párrafos con resumen */
.info-card__back--text {
    justify-content: space-between;
    padding: 30px 28px;
}

.info-card__paragraph {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ivb-crema);
    text-align: left;
}

/* ============================================
   SCIENCE SECTION
   ============================================ */
.science {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 104px 338px;
    overflow: hidden;
}

.science__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.science__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(155, 170, 189, 0) 0%, rgba(155, 170, 189, 0.7) 100%);
}

.science__card {
    position: relative;
    display: flex;
    gap: 125px;
    align-items: flex-start;
    padding: 60px 72px;
    background-color: rgba(237, 237, 237, 0.74);
    backdrop-filter: blur(16.75px);
    -webkit-backdrop-filter: blur(16.75px);
    border-radius: 8px;
}

.science__title {
    font-family: var(--font-primary);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ivb-casi-negro);
    width: 309px;
    flex-shrink: 0;
}

.science__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.science__text {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ivb-casi-negro);
    max-width: 351px;
}

/* Responsive para pantallas menores */
@media (max-width: 1400px) {
    .science {
        padding: 104px 80px;
    }
    
    .science__card {
        max-width: 1200px;
        width: 100%;
    }
    
    .science__title {
        min-width: 309px;
    }
    
    .science__content {
        flex: 1;
        min-width: 0;
    }
    
    .science__text {
        max-width: 100%;
    }
}

@media (max-width: 1024px) {
    .science {
        padding: 80px 40px;
    }
    
    .science__card {
        flex-direction: column;
        gap: 24px;
        padding: 40px;
    }
    
    .science__title {
        min-width: unset;
        width: 100%;
    }
    
    .science__content {
        gap: 24px;
    }
    
    .science__text {
        max-width: 100%;
    }
}

@media (max-width: 1200px) {
    /* Panel 2: Ajustes para pantallas medianas */
    .comparison__content--formula {
        gap: 24px;
    }
    
    .comparison__formula-left {
        max-width: 300px;
    }
    
    .comparison__formula-right {
        min-width: 280px;
    }
    
    /* Badges más pequeños en pantallas medianas */
    .comparison__badge-icon {
        width: 56px;
        height: 56px;
    }
    
    .comparison__badge-icon img {
        width: 56px;
        height: 56px;
    }
    
    .comparison__badge span {
        font-size: 10px;
        line-height: 14px;
    }
    
    .comparison__badge {
        min-width: 60px;
        max-width: 90px;
        margin: 0 auto;
    }
    
    /* Panel 3: Ajustes */
    .comparison__content--albion {
        gap: 24px;
    }
    
    .comparison__albion-left {
        width: auto;
        max-width: 440px;
    }
    
    .comparison__albion-images {
        width: 350px;
        height: 340px;
    }
    
    .comparison__albion-img {
        width: 200px;
        height: 200px;
    }
    
    .comparison__albion-img--bottom {
        top: 110px;
        left: 150px;
    }
    
    /* Benefits: Reducir gap en pantallas medianas */
    .benefits__container {
        gap: 24px;
    }
    
    /* ============================================
       INFO-CARDS - Carrusel desde 1200px
       ============================================ */
    .info-cards {
        padding: 40px 16px 40px 40px;
        background-color: var(--ivb-crema);
        overflow: visible;
    }
    
    .info-cards__grid {
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 8px;
        justify-content: flex-start;
        align-items: stretch;
    }
    
    .info-cards__grid::-webkit-scrollbar {
        display: none;
    }
    
    /* Cards - no flip, layout vertical */
    .info-card {
        flex-shrink: 0;
        width: 300px;
        height: auto;
        min-height: 654px;
        transform-style: flat;
        transition: none;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        cursor: default;
    }
    
    .info-card:hover:not(.info-card--flipped) {
        transform: none;
    }
    
    .info-card--flipped {
        transform: none;
    }
    
    /* Front face - visible, posicionado arriba */
    .info-card__front {
        position: relative;
        width: 100%;
        height: 274px;
        flex-shrink: 0;
        border-radius: 8px 8px 0 0;
    }
    
    .info-card__bg {
        border-radius: 8px 8px 0 0;
    }
    
    .info-card:hover:not(.info-card--flipped) .info-card__bg {
        transform: none;
    }
    
    .info-card__overlay {
        border-radius: 8px 8px 0 0;
        background: linear-gradient(to top, rgba(62, 74, 99, 0) 46.34%, rgba(62, 74, 99, 0.8) 115.33%);
        mix-blend-mode: multiply;
    }
    
    .info-card:hover:not(.info-card--flipped) .info-card__overlay {
        background-color: transparent;
        background: linear-gradient(to top, rgba(62, 74, 99, 0) 46.34%, rgba(62, 74, 99, 0.8) 115.33%);
    }
    
    .info-card__title {
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        line-height: 1.3;
        width: 270px;
    }
    
    /* Back face - siempre visible, posicionado abajo */
    .info-card__back {
        position: relative;
        width: 100%;
        flex: 1;
        transform: none;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        border-radius: 0 0 8px 8px;
        padding: 30px 18px 40px 18px;
    }
    
    /* Card Síntomas - lista con bullets */
    .info-card__list {
        gap: 0;
        padding-left: 12px;
    }
    
    .info-card__list li {
        font-size: 15px;
        line-height: 1.3;
        margin-bottom: 11px;
        gap: 10px;
    }
    
    .info-card__list li:last-child {
        margin-bottom: 0;
    }
    
    .info-card__list li::before {
        width: 6px;
        height: 6px;
        margin-top: 7px;
    }
    
    /* Card Factores y Déficit - groups */
    .info-card__back--tagged {
        gap: 26px;
        justify-content: flex-start;
    }
    
    .info-card__group {
        gap: 12px;
    }
    
    .info-card__tag {
        font-size: 10px;
        line-height: 14px;
        padding: 4px 10px;
    }
    
    .info-card__text {
        font-size: 15px;
        line-height: 1.3;
    }
    
    /* Card Déficit - text content */
    .info-card__back--text {
        gap: 26px;
    }
    
    .info-card__paragraph {
        font-size: 15px;
        line-height: 1.3;
    }
    
    /* ============================================
       RECOMMEND - Carrusel desde 1200px
       ============================================ */
    .recommend {
        padding: 48px 0;
        gap: 24px;
        align-items: flex-start;
    }
    
    .recommend__title {
        font-size: 28px;
        line-height: 1.2;
        text-align: left;
        padding: 0 16px 0 40px;
        width: 325px;
    }
    
    .recommend__grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0;
        margin-left: 40px;
        width: calc(100% - 40px);
        box-sizing: border-box;
        align-items: stretch;
    }
    
    .recommend__grid::-webkit-scrollbar {
        display: none;
    }
    
    .product-card {
        width: 320px;
        min-width: 320px;
        height: auto;
        flex-shrink: 0;
        padding: 16px;
        gap: 4px;
        border-radius: 10.671px;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
    }
    
    .product-card__header {
        gap: 4px;
    }
    
    .product-card__label {
        font-size: 10px;
        line-height: 14px;
    }
    
    .product-card__name {
        font-size: 22px;
        line-height: 1.15;
    }
    
    .product-card__tagline {
        font-size: 14px;
        line-height: 1.3;
        max-width: 100%;
    }
    
    .product-card__image {
        width: 268px;
        height: 264px;
    }
    
    .product-card__footer {
        width: 268px;
        height: 44px;
    }
    
    .product-card__price {
        font-size: 15px;
        line-height: 1.3;
    }
    
    .product-card__btn {
        padding: 13px 16px;
        border-radius: 5.336px;
        font-size: 15px;
        line-height: 1.3;
    }
}

@media (max-width: 976px) {
    /* Ocultar imagen del producto en la primera card */
    .comparison__product-image {
        display: none;
    }
    
    /* Agrandar la tabla para ocupar todo el espacio */
    .comparison__table-wrapper {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 964px) {
    /* Benefits: Activar layout mobile */
    .benefits {
        padding: 48px 15px;
        flex-direction: column;
    }
    
    .benefits__container {
        flex-direction: column;
        gap: 16px;
        align-items: center;
        width: 100%;
        max-width: 330px;
    }
    
    .benefits__title {
        font-size: 28px;
        line-height: 1.2;
        max-width: 325px;
        order: -1;
    }
    
    .benefits__body {
        width: 132px;
        height: 360px;
    }
    
    .benefits__body-image {
        top: 1.2%;
        left: 2.63%;
        width: auto;
        height: 98%;
    }
    
    /* Pain points - ajuste de tamaños */
    .benefits__point {
        width: 27px;
        height: 27px;
    }
    
    .benefits__point--head {
        width: 40px;
        height: 40px;
        top: 0.04%;
        left: calc(50% + 24px);
    }
    
    .benefits__point--shoulder-right {
        top: 10.82%;
        left: calc(50% - 15.5px);
    }
    
    .benefits__point--shoulder-left {
        top: 22.4%;
        left: calc(50% + 19.5px);
    }
    
    .benefits__point--heart {
        top: 24.56%;
        left: calc(50% - 48.5px);
    }
    
    .benefits__point--legs {
        top: 68.07%;
        left: calc(50% - 20.5px);
    }
    
    .benefits__info {
        width: 100%;
        max-width: 330px;
        height: auto;
        gap: 16px;
    }
    
    .benefits__info-title {
        font-size: 28px;
        line-height: 1.2;
    }
    
    .benefits__info-text {
        font-size: 15px;
        line-height: 1.3;
    }
    
    /* Navegación carrusel */
    .benefits__nav {
        display: none;
    }
    
    .benefits__carousel {
        position: relative;
        width: 100%;
        height: 211px;
    }
    
    .benefits__card {
        padding: 20px;
        gap: 10px;
        height: 211px;
    }
    
    .benefits__card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
    }
    
    .benefits__card-icon {
        width: 48px;
        height: 48px;
    }
    
    .benefits__card-title {
        font-size: 20px;
        line-height: 1.15;
    }
    
    .benefits__card-text {
        font-size: 15px;
        line-height: 1.3;
    }
    
    .benefits__card-arrow {
        display: block;
    }
}

.science__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: var(--ivb-punch);
    border-radius: 20px;
    text-decoration: none;
    width: fit-content;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.science__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.science__link span {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ivb-casi-negro);
}

.science__link img {
    width: 14px;
    height: 12px;
    transform: rotate(-90deg);
}

/* Icono ADN - oculto en desktop */
.science__icon {
    display: none;
}

/* ============================================
   DOSAGE SECTION
   ============================================ */
.dosage {
    display: flex;
    gap: 121px;
    align-items: flex-start;
    padding: 104px 160px;
    background-color: var(--ivb-crema);
    justify-content: center;
}

/* Header mobile - oculto en desktop */
.dosage__header {
    display: none;
}

.dosage__info-btn {
    display: none;
}

.dosage__left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 356px;
    flex-shrink: 0;
    align-self: stretch;
    gap: 24px;
}

/* Título desktop visible, mobile oculto */
.dosage__title--desktop {
    display: block;
}

.dosage__title--mobile {
    display: none;
}

.dosage__title {
    font-family: var(--font-primary);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ivb-casi-negro);
    width: 346px;
}

/* Card de dosis */
.dosage__card {
    position: relative;
    width: 384px;
    border-radius: 8px;
    min-height: 255px; /* 127px de info + 64px de top + margen extra */
}

.dosage__bottle {
    position: absolute;
    left: -34px;
    top: -13px;
    width: 163px;
    height: 234px;
    z-index: 2;
    transition: top 0.4s ease;
}

.dosage__bottle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dosage__info {
    position: relative;
    left: 36px;
    top: 64px;
    width: 348px;
    min-height: 127px;
    background-color: var(--ivb-punch);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
    gap: 8px;
    transition: top 0.4s ease, min-height 0.4s ease;
}

.dosage__caps {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    text-transform: uppercase;
    text-align: center;
    color: var(--ivb-casi-negro);
}

.dosage__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: var(--ivb-punch);
    border: 1px solid var(--ivb-casi-negro);
    border-radius: 20px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ivb-casi-negro);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.dosage__btn:hover {
    background-color: #bef05e;
    transform: translateY(-2px);
}

.dosage__btn-icon {
    font-size: 14px;
    font-weight: 600;
}

/* Contenido expandible - dentro de la card verde */
.dosage__expand {
    width: 224px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
    margin-top: 0;
}

.dosage__expand p {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: #212121;
    margin-bottom: 10px;
}

.dosage__expand p:last-child {
    margin-bottom: 0;
}

/* Estado expandido */
.dosage__card--expanded {
    min-height: 352px; /* altura de la card expandida */
}

.dosage__card--expanded .dosage__info {
    top: 0;
    min-height: 352px;
    justify-content: flex-start;
    padding-top: 24px;
}

.dosage__card--expanded .dosage__bottle {
    top: 148px;
}

.dosage__card--expanded .dosage__expand {
    max-height: 300px;
    opacity: 1;
    margin-top: 16px;
}

/* Acordeón con JavaScript */
.dosage__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 643px;
}

.accordion {
    border-top: 1px solid var(--ivb-casi-negro);
}

.accordion:last-child {
    border-bottom: 1px solid var(--ivb-casi-negro);
}

.accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px 32px;
    background: transparent;
    cursor: pointer;
    border: none;
    text-align: left;
    transition: background-color 0.3s ease;
}

.accordion--open .accordion__header {
    background-color: #f2f2f2;
}

.accordion__title {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--ivb-oscuro);
    transition: color 0.3s ease;
}

.accordion--open .accordion__title {
    color: var(--ivb-casi-negro);
}

.accordion__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion__icon img {
    width: 100%;
    height: 100%;
}

.accordion--open .accordion__icon {
    transform: rotate(180deg);
}

.accordion__body-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion--open .accordion__body-wrapper {
    max-height: 500px;
}

.accordion__body {
    padding: 0 32px 64px;
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.accordion__body p {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ivb-casi-negro);
}

.accordion__body strong {
    font-family: var(--font-primary);
    font-weight: 600;
    text-transform: uppercase;
}

/* ============================================
   DOSAGE - Responsive desde 1200px
   ============================================ */
@media (max-width: 1200px) {
    .dosage {
        gap: 40px;
        padding: 64px 56px;
    }
    
    .dosage__left {
        width: 300px;
    }
    
    .dosage__title {
        font-size: 32px;
        width: 100%;
    }
    
    .dosage__card {
        width: 320px;
        min-height: 200px;
    }
    
    .dosage__bottle {
        left: -20px;
        width: 130px;
        height: 190px;
    }
    
    .dosage__info {
        left: 20px;
        top: 50px;
        width: 280px;
        padding: 20px;
    }
    
    .dosage__expand {
        width: 180px;
    }
    
    .dosage__card--expanded .dosage__info {
        top: 0;
        min-height: 300px;
    }
    
    .dosage__card--expanded .dosage__bottle {
        top: 120px;
    }
}


/* ============================================
   RECOMMEND SECTION - Combínalo con
   ============================================ */
.recommend {
    background-color: var(--ivb-gris-claro);
    padding: 104px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 42.686px;
}

.recommend__title {
    font-family: var(--font-primary);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ivb-casi-negro);
    text-align: center;
}

.recommend__grid {
    display: flex;
    gap: 25px;
    align-items: stretch;
}

/* Product Card */
.product-card {
    background-color: white;
    border-radius: 8px;
    width: 335px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
}

.product-card:nth-child(1)::before {
    background-image: url('../assets/images/card-vitamina-hover.png');
    background-size: 400%;
    background-position: 50% 50%;
}

.product-card:nth-child(2)::before {
    background-image: url('../assets/images/card-stressoff-hover.png');
    background-size: cover;
    background-position: 20% 50%;
}

.product-card:nth-child(3)::before {
    background-image: url('../assets/images/card-hierro-hover.png');
    background-size: cover;
    background-position: center;
}

@media (hover: hover) and (min-width: 1025px) {
    .product-card:hover::before {
        opacity: 0.83;
    }

    .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(39, 58, 79, 0.15);
    }

    .product-card:hover .product-card__image img {
        opacity: 0;
    }

    .product-card:nth-child(3):hover .product-card__image {
        opacity: 0;
    }

    .product-card:nth-child(3):hover .product-card__label,
    .product-card:nth-child(3):hover .product-card__name,
    .product-card:nth-child(3):hover .product-card__tagline,
    .product-card:nth-child(3):hover .product-card__price {
        color: white;
    }
}

.product-card > * {
    position: relative;
    z-index: 1;
}

.product-card__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-card__label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: #212121;
}

.product-card__name {
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ivb-casi-negro);
}

.product-card__tagline {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: #212121;
    max-width: 246px;
}

.product-card__image {
    width: 303px;
    height: 300px;
    position: relative;
    overflow: hidden;
    margin: 0;
    flex-grow: 1;
}

.product-card__image img {
    position: absolute;
    max-width: none;
    transition: opacity 0.3s ease;
}

/* Card 1: Vitamina D3K2 - imagen llena el contenedor */
.product-card:nth-child(1) .product-card__image img {
    width: 103.63%;
    height: 104.67%;
    left: -1.82%;
    top: -8.33%;
}

/* Card 2: StressOff - imagen más estrecha y alta, centrada */
.product-card:nth-child(2) .product-card__image img {
    width: 87.46%;
    height: 114.19%;
    left: 6.27%;
    top: -10.1%;
}

/* Card 3: SomniLove - imagen más pequeña, centrada abajo */
.product-card:nth-child(3) .product-card__image img {
    width: 83.33%;
    height: 84.17%;
    left: 8.45%;
    top: 9.16%;
}

/* Gradiente inferior en card SomniLove */
.product-card:nth-child(3) .product-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 84.78%, rgb(255,255,255) 91.09%);
    pointer-events: none;
    z-index: 1;
}

.product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 33px;
    width: 303px;
}

.product-card__price {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ivb-casi-negro);
}

.product-card__btn {
    background-color: var(--ivb-punch);
    border-radius: 4px;
    padding: 10px 18px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 400;
    color: var(--ivb-casi-negro);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.product-card__btn:hover {
    background-color: #bef05e;
    transform: translateY(-2px);
}

/* ============================================
   FAQ SECTION - Preguntas Frecuentes
   ============================================ */
.faq {
    background-color: var(--ivb-gris-suave);
    padding: 104px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 74.7px;
}

.faq__title {
    font-family: var(--font-primary);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ivb-casi-negro);
    text-align: center;
}

.faq__list {
    width: 100%;
    max-width: 928px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq__item {
    border-bottom: 1px solid var(--ivb-casi-negro);
    padding-bottom: 24px;
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.faq__question-text {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ivb-casi-negro);
    flex: 1;
}

/* Saltos de línea solo visibles en mobile */
.faq__br-mobile {
    display: none;
}

.faq__icon {
    width: 19px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__icon img {
    width: 100%;
    height: 100%;
}

.faq__item--open .faq__icon {
    transform: rotate(180deg);
}

/* Wrapper para animación con max-height */
.faq__answer-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__item--open .faq__answer-wrapper {
    max-height: 500px;
}

.faq__answer {
    padding-top: 16px;
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq__answer p {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ivb-casi-negro);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background-color: var(--ivb-gris-medio);
    padding: 68px 404px 180px 404px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.footer__logo {
    margin: 0;
}

.footer__logo img {
    width: 120px;
    height: 86px;
}

.footer__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.footer__title {
    font-family: var(--font-primary);
    font-size: 90px;
    font-weight: 400;
    line-height: normal;
    color: var(--ivb-gris-suave);
}

.footer__subtitle {
    font-family: var(--font-primary);
    font-size: 28px;
    font-weight: 400;
    line-height: normal;
    color: var(--ivb-gris-suave);
}

/* ============================================
   MODAL
   ============================================ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal.is-open {
    display: flex;
}

.modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(39, 58, 79, 0.6);
    cursor: pointer;
}

.modal__content {
    position: relative;
    z-index: 2001;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
}

.modal__content--dosage {
    background-color: var(--ivb-punch);
    border-radius: 8px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 310px;
    max-width: 90vw;
}

.modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal__close img {
    width: 16px;
    height: 16px;
}

.modal__title {
    font-family: var(--font-primary);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.15;
    color: #212121;
    text-align: center;
}

.modal__image {
    width: 156px;
    height: 148px;
    margin: 0;
}

.modal__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modal__capsules {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: #212121;
    text-align: center;
    text-transform: uppercase;
}

.modal__description {
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #212121;
    text-align: center;
    width: 270px;
    max-width: 100%;
}

.modal__description p {
    margin-bottom: 10px;
}

.modal__description p:last-child {
    margin-bottom: 0;
}

/* ----- Modal Video ----- */
.modal--video .modal__overlay {
    background: rgba(0, 0, 0, 0.65);
}

.modal__content--video {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
}

.modal__video {
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal__close--video {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.2s ease;
    z-index: 2002;
}

.modal__close--video:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

.modal__close--video img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

/* ----- Hero Video Clickable ----- */
.hero__video-wrapper {
    position: relative;
    width: 280px;
    height: 370px;
    display: block;
}

.hero__phone {
    cursor: pointer;
}

/* ============================================
   RESPONSIVE - MOBILE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    /* ---- Sidebar: ocultar en móvil ---- */
    .sidebar-menu {
        display: none;
    }
    
    /* ---- Hero Section Mobile ---- */
    .hero {
        padding: 140px 16px 80px;
        min-height: auto;
        gap: 16px;
    }
    
    .hero__header {
        display: none; /* Se usará el mobile header en su lugar */
    }
    
    .hero__content {
        gap: 24px;
        margin-top: 0;
    }
    
    .hero__video-container {
        margin: 0;
    }
    
    .hero__video-button {
        width: 200px;
        height: 290px;
        padding-left: 20px;
    }

    .hero__video-wrapper {
        width: 200px;
        height: 290px;
        padding-left: 20px;
    }
    
    .hero__phone {
        width: 130px;
        height: 268px;
        border-radius: 20px;
    }
    
    .hero__phone--front {
        left: 0;
        bottom: 0;
    }
    
    .hero__phone--back {
        right: -8px;
        top: 12px;
    }
    
    .hero__phone-screen {
        border-radius: 20px;
    }
    
    .hero__badge {
        top: 40%;
        right: -18px;
        font-size: 8px;
        padding: 4px 10px;
        transform: rotate(-12deg);
    }
    
    .hero__text {
        gap: 8px;
    }
    
    .hero__title {
        font-size: 44px;
        line-height: 1.1;
    }
    
    .hero__subtitle {
        font-size: 15px;
        line-height: 1.3;
        color: var(--ivb-crema);
        max-width: 328px;
        margin-top: 0;
    }
    
    .hero__description {
        font-size: 22px;
        line-height: 1.15;
        color: var(--ivb-oscuro);
        max-width: 296px;
        margin-top: 16px;
    }
    
    .hero__scroll-button {
        width: 29px;
        height: 29px;
        border-radius: 16px;
    }
    
    .hero__scroll-button img {
        width: 13px;
        height: 16px;
    }
    
    /* Barra de producto móvil */
    .hero__product-bar {
        bottom: 16px;
        width: calc(100% - 30px);
        max-width: 330px;
        padding: 8px 12px;
        gap: 8px;
        border-radius: 8px;
        box-shadow: 0px 4px 10px 0px rgba(96, 114, 135, 0.2);
    }
    
    .hero__product-left {
        gap: 8px;
    }
    
    .hero__product-image {
        width: 38px;
        height: 49px;
    }
    
    .hero__product-image img {
        width: 150%;
        margin-left: -25%;
        margin-top: -6%;
    }
    
    .hero__product-name {
        font-size: 14px;
    }
    
    .hero__product-right {
        display: none;
    }
    
    .hero__cta-button {
        width: auto;
        padding: 12px 24px;
        font-size: 12px;
        border-radius: 4px;
    }
    
    /* Mobile Header - visible en móvil */
    .mobile-header {
        display: flex;
    }
    
    /* Padding inferior del body para la barra flotante */
    body {
        padding-bottom: 100px;
    }
    
    /* ============================================
       SECCIÓN INTRO - Mobile Responsive
       ============================================ */
    .intro {
        padding: 65px 10px;
    }
    
    .intro__text {
        max-width: 274px;
        font-size: 22px;
        line-height: 1.15;
    }
    
    /* ============================================
       SECCIÓN BENEFITS - Mobile Responsive
       ============================================ */
    .benefits {
        padding: 48px 15px;
        flex-direction: column;
    }
    
    .benefits__container {
        flex-direction: column;
        gap: 16px;
        align-items: center;
        width: 100%;
        max-width: 330px;
    }
    
    .benefits__title {
        order: 1;
        font-size: 28px;
        line-height: 1.2;
        max-width: 325px;
    }
    
    .benefits__title--mobile {
        display: block;
    }
    
    .benefits__title--desktop {
        display: none;
    }
    
    .benefits__body {
        order: 2;
        width: 132px;
        height: 360px;
    }
    
    .benefits__info {
        order: 3;
    }
    
    .benefits__body-image {
        top: 1.2%;
        left: 2.63%;
        width: auto;
        height: 98%;
    }
    
    /* Pain points - ajuste de tamaños para móvil */
    .benefits__point {
        width: 27px;
        height: 27px;
    }
    
    .benefits__point--head {
        width: 40px;
        height: 40px;
        top: 0.04%;
        left: calc(50% + 24px);
    }
    
    .benefits__point--shoulder-right {
        top: 10.82%;
        left: calc(50% - 15.5px);
    }
    
    .benefits__point--shoulder-left {
        top: 22.4%;
        left: calc(50% + 19.5px);
    }
    
    .benefits__point--heart {
        top: 24.56%;
        left: calc(50% - 48.5px);
    }
    
    .benefits__point--legs {
        top: 68.07%;
        left: calc(50% - 20.5px);
    }
    
    .benefits__info {
        width: 100%;
        height: auto;
        gap: 16px;
    }
    
    /* Navegación carrusel móvil */
    .benefits__nav {
        display: none;
    }
    
    .benefits__carousel {
        position: relative;
        width: 100%;
        height: 211px;
    }
    
    .benefits__card {
        padding: 20px;
        gap: 10px;
        height: 211px;
    }
    
    .benefits__card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
    }
    
    .benefits__card-icon {
        width: 48px;
        height: 48px;
    }
    
    .benefits__card-title {
        font-size: 20px;
        line-height: 1.15;
    }
    
    .benefits__card-text {
        font-size: 15px;
        line-height: 1.3;
    }
    
    .benefits__card-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 19px;
        transform: rotate(-90deg);
    }
    
    /* ============================================
       SECCIÓN RESULTS - Mobile Responsive
       ============================================ */
    .results {
        padding: 48px 15px;
        gap: 40px;
        align-items: flex-start;
        background-color: var(--ivb-gris-claro);
    }
    
    /* Ocultar backgrounds e overlay en móvil */
    .results__backgrounds {
        display: none;
    }
    
    .results::before {
        display: none;
    }
    
    .results__title {
        font-size: 28px;
        line-height: 1.2;
        max-width: 320px;
        text-align: left;
        color: var(--ivb-casi-negro);
    }
    
    /* Timeline móvil */
    .results__timeline {
        gap: 72px;
        width: 100%;
        justify-content: flex-start;
        padding-left: 6px;
    }
    
    .results__timeline-line {
        top: 36px;
        left: 30px; /* Empieza desde el centro del primer botón */
        right: -100vw; /* Continúa hasta el final de la pantalla */
        width: auto;
        background-color: var(--ivb-gris-medio);
    }
    
    .results__step {
        width: auto;
        gap: 8px;
    }
    
    .results__step-label {
        font-size: 10px;
        line-height: 14px;
        color: var(--ivb-casi-negro);
    }
    
    .results__step--active .results__step-label {
        color: var(--ivb-punch);
    }
    
    .results__step-indicator {
        width: 26px;
        height: 26px;
    }
    
    .results__step-dot {
        width: 12px;
        height: 12px;
    }
    
    /* Content móvil */
    .results__content {
        width: 100%;
        min-height: auto;
    }
    
    .results__content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 15px;
    }
    
    .results__content-title {
        display: block;
        font-family: var(--font-mono);
        font-size: 20px;
        font-weight: 400;
        line-height: 1.15;
        text-transform: uppercase;
        color: var(--ivb-oscuro);
    }
    
    .results__content-arrow {
        display: flex;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--ivb-punch);
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    .results__content-arrow img {
        width: 10px;
        height: 13px;
        transform: rotate(-90deg);
    }
    
    .results__list {
        gap: 0;
        padding-right: 54px;
    }
    
    .results__item {
        display: list-item;
        list-style-type: disc;
        margin-left: 22.5px;
        gap: 0;
    }
    
    .results__check {
        display: none;
    }
    
    .results__text {
        font-size: 15px;
        line-height: 1.3;
        color: var(--ivb-casi-negro);
    }
    
    /* ============================================
       SECCIÓN COMPARISON - Mobile Responsive
       ============================================ */
    .comparison {
        padding: 48px 0;
    }
    
    .comparison__inner {
        gap: 32px;
        padding: 0 16px;
    }
    
    .comparison__title {
        font-size: 28px;
        line-height: 1.2;
        max-width: 325px;
    }
    
    .comparison__tabs-container {
        width: 100%;
    }
    
    .comparison__tabs {
        width: 100%;
    }
    
    .comparison__tab {
        padding: 6px 16px;
        font-size: 14px;
        line-height: 1.3;
        min-height: 59px;
        flex: 1;
    }
    
    .comparison__panel {
        padding: 12px;
        width: 100%;
    }
    
    .comparison__content {
        flex-direction: column;
        gap: 24px;
        padding: 0;
    }
    
    .comparison__panel-title {
        font-size: 22px;
        line-height: 1.15;
    }
    
    .comparison__table-wrapper {
        width: 100%;
        padding: 12px 8px;
    }
    
    .comparison__table-header {
        font-size: 15px;
        padding: 4px 8px 20px;
    }
    
    .comparison__table-header--highlight {
        padding: 4px 8px 20px;
    }
    
    .comparison__table-feature {
        font-size: 15px;
        line-height: 1.3;
        padding: 12px 8px 12px 0px;
        width: 50%;
    }
    
    .comparison__table-cell {
        padding: 12px 4px;
    }
    
    .comparison__table-cell--highlight {
        width: 30%;
    }
    
    .comparison__table-cell:last-child {
        width: 20%;
    }
    
    .comparison__icon {
        width: 22px;
        height: 22px;
    }
    
    /* Ocultar "magnesios" en el header en móvil */
    .comparison__header-break,
    .comparison__header-extra {
        display: none;
    }
    
    /* Ocultar imagen del producto en móvil */
    .comparison__product-image {
        display: none;
    }
    
    /* Panel 2: Nuestra Fórmula - Mobile */
    .comparison__content--formula {
        flex-direction: column;
        gap: 32px;
        padding: 24px 16px;
    }
    
    .comparison__formula-left {
        width: 100%;
    }
    
    .comparison__formula-intro {
        font-size: 15px;
        line-height: 1.3;
    }
    
    .comparison__formula-type p {
        font-size: 15px;
    }
    
    .comparison__formula-icon {
        width: 36px;
        height: 36px;
    }
    
    .comparison__formula-right {
        width: 100%;
    }
    
    .comparison__formula-title {
        font-size: 22px;
    }
    
    .comparison__formula-text {
        font-size: 15px;
    }
    
    .comparison__formula-badges {
        justify-content: center;
    }
    
    .comparison__badge {
        width: calc(50% - 8px);
        max-width: 72px;
        margin: 0 auto;
    }
    
    .comparison__badge-icon {
        width: 48px;
        height: 48px;
    }
    
    .comparison__badge-icon img {
        width: 48px;
        height: 48px;
    }
    
    .comparison__badge-symbol {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px;
    }
    
    .comparison__badge span {
        font-size: 10px;
    }
    
    .comparison__formula-link {
        align-self: center;
    }
    
    /* Panel 3: Por qué Albion - Mobile */
    .comparison__content--albion {
        flex-direction: column;
        gap: 24px;
        padding: 24px 16px;
    }
    
    .comparison__albion-left {
        width: 100%;
    }
    
    .comparison__albion-text {
        font-size: 15px;
    }
    
    .comparison__albion-images {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        max-width: 300px;
        align-self: center;
    }
    
    .comparison__albion-img {
        width: 60%;
        height: 60%;
    }
    
    .comparison__albion-img--top {
        top: 0;
        left: 0;
    }
    
    .comparison__albion-img--bottom {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
    }
    
    /* ============================================
       SECCIÓN DEFICIENCY - Mobile Responsive
       ============================================ */
    .deficiency {
        flex-direction: column;
        height: auto;
    }
    
    .deficiency__content {
        width: 100%;
        padding: 48px 16px;
        gap: 24px;
        align-items: flex-start;
        max-width: none;
    }
    
    .deficiency__title {
        font-size: 28px;
        line-height: 1.2;
        max-width: 327px;
    }
    
    .deficiency__text {
        max-width: 100%;
        gap: 24px;
    }
    
    .deficiency__text p {
        font-size: 15px;
        line-height: 1.3;
    }
    
    .deficiency__image {
        width: 100%;
        height: 360px;
        max-width: none;
    }
    
    .deficiency__image img {
        object-position: center center;
    }
    
    /* ===== INFO-CARDS (Mobile Carousel) ===== */
    .info-cards {
        padding: 40px 16px;
        background-color: var(--ivb-crema);
    }
    
    .info-cards__grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 8px;
        justify-content: flex-start;
        align-items: stretch;
    }
    
    .info-cards__grid::-webkit-scrollbar {
        display: none;
    }
    
    /* Cards en mobile - no flip, layout vertical */
    .info-card {
        flex-shrink: 0;
        width: 300px;
        height: auto;
        min-height: 654px;
        transform-style: flat;
        transition: none;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        cursor: default;
    }
    
    .info-card:hover:not(.info-card--flipped) {
        transform: none;
    }
    
    .info-card--flipped {
        transform: none;
    }
    
    /* Front face - visible, posicionado arriba */
    .info-card__front {
        position: relative;
        width: 100%;
        height: 274px;
        flex-shrink: 0;
        border-radius: 8px 8px 0 0;
    }
    
    .info-card__bg {
        border-radius: 8px 8px 0 0;
    }
    
    .info-card:hover:not(.info-card--flipped) .info-card__bg {
        transform: none;
    }
    
    .info-card__overlay {
        border-radius: 8px 8px 0 0;
        background: linear-gradient(to top, rgba(62, 74, 99, 0) 46.34%, rgba(62, 74, 99, 0.8) 115.33%);
        mix-blend-mode: multiply;
    }
    
    .info-card:hover:not(.info-card--flipped) .info-card__overlay {
        background-color: transparent;
        background: linear-gradient(to top, rgba(62, 74, 99, 0) 46.34%, rgba(62, 74, 99, 0.8) 115.33%);
    }
    
    .info-card__title {
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        line-height: 1.3;
        width: 270px;
    }
    
    /* Back face - siempre visible, posicionado abajo */
    .info-card__back {
        position: relative;
        width: 100%;
        flex: 1;
        transform: none;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        border-radius: 0 0 8px 8px;
        padding: 30px 18px 40px 18px;
    }
    
    /* Card Síntomas - lista con bullets */
    .info-card__list {
        gap: 0;
        padding-left: 12px;
    }
    
    .info-card__list li {
        font-size: 15px;
        line-height: 1.3;
        margin-bottom: 11px;
        gap: 10px;
    }
    
    .info-card__list li:last-child {
        margin-bottom: 0;
    }
    
    .info-card__list li::before {
        width: 6px;
        height: 6px;
        margin-top: 7px;
    }
    
    /* Card Factores y Déficit - groups */
    .info-card__back--tagged {
        gap: 26px;
        justify-content: flex-start;
    }
    
    .info-card__group {
        gap: 12px;
    }
    
    .info-card__tag {
        font-size: 10px;
        line-height: 14px;
        padding: 4px 10px;
    }
    
    .info-card__text {
        font-size: 15px;
        line-height: 1.3;
    }
    
    /* Card Déficit - text content */
    .info-card__back--text {
        gap: 26px;
    }
    
    .info-card__paragraph {
        font-size: 15px;
        line-height: 1.3;
    }
    
    /* ===== SCIENCE SECTION (Mobile) ===== */
    .science {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 48px 16px;
        background-color: #EDEDED;
        overflow: visible;
    }
    
    .science__bg {
        position: relative;
        width: 100%;
        height: 268px;
        border-radius: 8px;
        object-fit: cover;
        order: 2;
    }
    
    .science__gradient {
        display: none;
    }
    
    .science__card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 0;
        order: 1;
    }
    
    .science__icon {
        display: block;
        width: 48px;
        height: 48px;
    }
    
    .science__icon img {
        width: 100%;
        height: 100%;
    }
    
    .science__title {
        font-size: 28px;
        line-height: 1.2;
        width: 252px;
    }
    
    .science__content {
        gap: 24px;
    }
    
    .science__text {
        font-size: 15px;
        line-height: 1.3;
        max-width: 100%;
    }
    
    .science__link {
        padding: 4px 10px;
        gap: 4px;
    }
    
    .science__link span {
        font-size: 10px;
        line-height: 14px;
        color: var(--ivb-oscuro);
    }
    
    .science__link img {
        width: 12px;
        height: 10px;
    }
    
    /* ===== DOSAGE SECTION (Mobile) ===== */
    .dosage {
        flex-direction: column;
        gap: 32px;
        padding: 48px 16px;
    }
    
    /* Header mobile visible */
    .dosage__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
    }
    
    .dosage__title--desktop {
        display: none;
    }
    
    .dosage__title--mobile {
        display: block;
        font-size: 28px;
        line-height: 1.2;
        width: 257px;
    }
    
    .dosage__info-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: var(--ivb-punch);
        border: none;
        border-radius: 85px;
        cursor: pointer;
        flex-shrink: 0;
    }
    
    .dosage__info-btn img {
        width: 24px;
        height: 24px;
    }
    
    /* Ocultar la card en mobile */
    .dosage__left {
        display: none;
    }
    
    .dosage__right {
        width: 100%;
    }

    /* Acordeones en mobile */
    .accordion {
        border-top: 1px solid var(--ivb-casi-negro);
        border-bottom: none;
    }
    
    .accordion:last-child {
        border-bottom: 1px solid var(--ivb-oscuro);
    }
    
    .accordion:not(.accordion--open) {
        border-color: var(--ivb-oscuro);
    }
    
    .accordion__header {
        padding: 24px 12px;
    }
    
    .accordion--open .accordion__header {
        padding-bottom: 14px;
    }
    
    .accordion__title {
        font-size: 20px;
        line-height: 1.15;
        width: auto;
    }
    
    .accordion__icon {
        display: none;
    }
    
    .accordion__body-wrapper {
        max-height: 0;
    }
    
    .accordion--open .accordion__body-wrapper {
        max-height: 600px;
    }
    
    .accordion__body {
        padding: 0 12px 24px;
        gap: 10px;
    }
    
    .accordion__body p {
        font-size: 15px;
        line-height: 1.3;
    }
    
    /* ===== REVIEWS SECTION (Mobile) ===== */
    .reviews {
        min-height: 360px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .reviews__background img {
        transform: translate(-50%, -50%) scale(1.5);
    }
    
    .reviews__container {
        position: relative;
        width: 100%;
        padding: 48px 16px;
        gap: 0;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        margin: 0 auto;
    }
    
    .reviews__viewport {
        max-width: 100%;
        width: 100%;
        overflow: hidden;
    }
    
    .reviews__track {
        gap: 16px;
    }
    
    .review-card {
        width: calc(100vw - 32px);
        min-width: calc(100vw - 32px);
        flex-shrink: 0;
        height: 210px;
        padding: 48px 40px;
        gap: 7px;
        box-sizing: border-box;
    }
    
    .review-card__author {
        font-size: 14px;
        line-height: 1.3;
    }
    
    .review-card__stars {
        width: 80px;
        height: 16px;
    }
    
    .review-card__text {
        font-size: 13px;
        line-height: 1.15;
        max-width: 254px;
    }
    
    .review-card__location {
        font-size: 10px;
        line-height: 1.3;
    }
    
    /* Controles de navegación dentro de la card */
    .reviews__controls {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        width: 100%;
        padding: 0 16px;
        justify-content: space-between;
        pointer-events: none;
        gap: 0;
        box-sizing: border-box;
    }
    
    .reviews__arrow {
        width: 32px;
        height: 32px;
        border-radius: 16px;
        pointer-events: auto;
    }
    
    .reviews__arrow img {
        width: 12px;
        height: 14px;
    }
    
    /* ===== RECOMMEND SECTION (Mobile) ===== */
    .recommend {
        padding: 48px 0;
        gap: 24px;
        align-items: flex-start;
    }
    
    .recommend__title {
        font-size: 28px;
        line-height: 1.2;
        text-align: left;
        padding: 0 16px;
        width: 325px;
    }
    
    .recommend__grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0;
        margin-left: 16px;
        width: calc(100% - 16px);
        box-sizing: border-box;
        align-items: stretch;
    }
    
    .recommend__grid::-webkit-scrollbar {
        display: none;
    }
    
    .product-card {
        width: 320px;
        min-width: 320px;
        height: auto;
        flex-shrink: 0;
        padding: 16px;
        gap: 4px;
        border-radius: 10.671px;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
    }
    
    .product-card__header {
        gap: 4px;
    }
    
    .product-card__label {
        font-size: 10px;
        line-height: 14px;
    }
    
    .product-card__name {
        font-size: 22px;
        line-height: 1.15;
    }
    
    .product-card__tagline {
        font-size: 14px;
        line-height: 1.3;
        max-width: 100%;
    }
    
    .product-card__image {
        width: 268px;
        height: 264px;
    }
    
    .product-card__footer {
        width: 268px;
        height: 44px;
    }
    
    .product-card__price {
        font-size: 15px;
        line-height: 1.3;
    }
    
    .product-card__btn {
        padding: 13px 16px;
        border-radius: 5.336px;
        font-size: 15px;
        line-height: 1.3;
    }
    
    /* Ocultar hover en mobile */
    .product-card::before {
        display: none;
    }
    
    .product-card:hover {
        transform: none;
        box-shadow: none;
    }
    
    /* ============================================
       FAQ - Mobile
       ============================================ */
    .faq {
        padding: 48px 16px;
        gap: 32px;
        align-items: flex-start;
    }
    
    .faq__title {
        font-size: 28px;
        line-height: 1.2;
        text-align: left;
        width: 243px;
    }
    
    .faq__list {
        width: 100%;
        max-width: none;
        gap: 24px;
    }
    
    .faq__item {
        padding-bottom: 24px;
    }
    
    .faq__question {
        padding: 0;
    }
    
    .faq__question-text {
        font-size: 14px;
        line-height: 1.3;
        width: auto;
        flex: 1;
        padding-right: 32px;
    }
    
    /* Saltos de línea visibles en mobile */
    .faq__br-mobile {
        display: inline;
    }
    
    .faq__icon {
        width: 19px;
        height: 22px;
    }
    
    .faq__answer {
        padding-top: 16px;
        padding-right: 0;
    }
    
    .faq__answer p {
        font-size: 14px;
        line-height: 1.4;
    }
    
    /* ============================================
       FOOTER - Mobile
       ============================================ */
    .footer {
        padding: 25px 16px 40px;
        min-height: auto;
    }
    
    .footer__content {
        gap: 12px;
    }
    
    .footer__logo {
        margin: 0;
    }
    
    .footer__logo img {
        width: 68px;
        height: 49px;
    }
    
    .footer__text {
        gap: 4px;
    }
    
    .footer__title {
        font-size: 42px;
        letter-spacing: -0.42px;
        color: var(--ivb-gris-suave);
    }
    
    .footer__subtitle {
        font-size: 17px;
        letter-spacing: -0.17px;
        color: var(--ivb-gris-suave);
    }
}

/* ============================================
   RESPONSIVE - Extra Small (max-width: 400px)
   ============================================ */
@media (max-width: 400px) {
    /* Iconos más pequeños en la segunda pestaña de comparación */
    .comparison__formula-icon {
        width: 28px !important;
        height: 28px !important;
    }
}