/* ==========================================================================
   COMPARATIVA.CSS - Estilos encapsulados y únicos
   ========================================================================== */

   .c-comparative__container { max-width: 960px; margin: 0 auto; padding: 0 20px; }
   .c-comparative__section-title { text-align: center; font-size: 2.25rem; font-weight: 700; margin-bottom: 24px; }
   .c-comparative__section-subtitle { text-align: center; font-size: 1.125rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto 48px auto; }
   .c-comparative__btn { display: inline-block; padding: 14px 32px; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: all var(--transition-speed); }
   .c-comparative__btn--primary { background-color: var(--primary-accent); color: var(--text-on-accent); }
   .c-comparative__btn--primary:hover { background-color: var(--primary-accent-hover); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3); }
   .c-comparative__btn--large { padding: 16px 32px; font-size: 1.125rem; border-radius: 16px; }
   [data-animated] { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
   [data-animated].visible { opacity: 1; transform: translateY(0); }
   
   .c-comparative__hero { text-align: center; padding: 60px 0; }
   .c-comparative__hero-title { font-size: 3rem; font-weight: 700; margin-bottom: 16px; line-height: 1.2; }
   .c-comparative__hero-subtitle { max-width: 700px; margin: 0 auto 48px auto; }
   .c-comparative__calculator { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; background-color: var(--bg-card); padding: 32px; border-radius: var(--border-radius); box-shadow: var(--box-shadow); text-align: left; align-items: start; max-width: 850px; margin: 0 auto; }
   .c-comparative__calculator-title { font-size: 1.5rem; margin-bottom: 24px; }
   .c-comparative__calculator-result .c-comparative__calculator-title { text-align: center; }
   .c-comparative__form-group { margin-bottom: 20px; }
   .c-comparative__form-group label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: var(--text-secondary); }
   .c-comparative__form-group input { width: 100%; padding: 12px; background: #0F172A; border: 2px solid var(--border-color-default); border-radius: 12px; color: var(--text-primary); font-size: 1rem; }
   .c-comparative__calculator-form .c-comparative__btn { width: 100%; padding: 16px; }
   .c-comparative__result-box { background: #0F172A; padding: 16px; border-radius: 12px; margin-bottom: 16px; border-left: 4px solid var(--border-color-default); }
   .c-comparative__result-box p { color: var(--text-secondary); margin-bottom: 4px; font-size: 0.9rem; }
   .c-comparative__result-box span { font-size: 2rem; font-weight: 700; }
   .c-comparative__result-box--academia { border-color: var(--danger-color); }
   .c-comparative__result-box--academia span { color: var(--danger-color); }
   .c-comparative__result-box--cachimbo { border-color: var(--primary-accent); }
   .c-comparative__result-box--cachimbo span { color: var(--text-primary); }
   .c-comparative__result-box--savings { border-color: var(--secondary-accent); }
   .c-comparative__result-box--savings span { color: var(--secondary-accent); }
   .c-comparative__cta-calculator { margin-top: 24px; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
   .c-comparative__cta-calculator.visible { opacity: 1; transform: translateY(0); display: block !important; }
   
   .c-comparative__synergy { padding: 80px 0; background-color: var(--bg-card); }
   .c-comparative__synergy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 48px; }
   .c-comparative__synergy-card { text-align: center; background-color: var(--bg-main); padding: 32px; border-radius: var(--border-radius); }
   .c-comparative__synergy-icon { font-size: 2.5rem; margin-bottom: 16px; }
   .c-comparative__synergy-card h3 { font-size: 1.25rem; margin-bottom: 12px; }
   .c-comparative__synergy-card p { color: var(--text-secondary); font-size: 0.95rem; }
   
   .c-comparative__visual-demo { padding: 80px 0; }
   .c-comparative__slider { position: relative; width: 100%; max-width: 800px; margin: 0 auto; aspect-ratio: 16/9; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); cursor: ew-resize; }
   .c-comparative__slider-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
   .c-comparative__slider-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
   .c-comparative__slider-img--after { clip-path: inset(0 0 0 50%); }
   .c-comparative__slider-handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: white; transform: translateX(-50%); z-index: 10; }
   .c-comparative__slider-arrows { width: 50px; height: 50px; border: 3px solid white; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(5px); }
   .c-comparative__slider-label { position: absolute; bottom: 16px; background: rgba(0,0,0,0.6); color: white; padding: 6px 12px; border-radius: 8px; font-size: 0.9rem; font-weight: 500; }
   .c-comparative__slider-img--before .c-comparative__slider-label { left: 16px; }
   .c-comparative__slider-img--after .c-comparative__slider-label { right: 16px; }
   
   .c-comparative__proof { padding: 80px 0; background-color: var(--bg-card); }
   .c-comparative__testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-bottom: 60px; }
   .c-comparative__wall h4 { text-align: center; color: var(--text-secondary); margin-bottom: 24px; }
   .c-comparative__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; filter: grayscale(1); opacity: 0.6; }
   .c-comparative__logos span { font-size: 1.5rem; font-weight: 600; }
   
   .c-comparative__table-section { padding: 80px 0; }
   .c-comparative__table-wrapper { overflow-x: auto; }
   .c-comparative__table { width: 100%; border-collapse: separate; border-spacing: 0; background-color: var(--bg-card); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); min-width: 800px; }
   .c-comparative__table th, .c-comparative__table td { padding: 20px 15px; text-align: center; border-bottom: 1px solid var(--border-color-default); vertical-align: middle; }
   .c-comparative__table thead th { font-size: 1.1rem; background-color: var(--bg-main); border-bottom: 2px solid var(--border-color-default); }
   .c-comparative__table tbody tr:last-child td { border-bottom: none; }
   .c-comparative__table .header-content span { display: block; margin-bottom: 8px; }
   .c-comparative__table .header-rating { font-size: 0.8rem; font-weight: 700; padding: 4px 8px; border-radius: 6px; display: inline-block; background-color: var(--border-color-default); color: var(--text-secondary); }
   .c-comparative__table .header-rating.better { background-color: rgba(139, 92, 246, 0.2); color: var(--primary-accent); }
   .c-comparative__table .header-rating.best { background-color: rgba(52, 211, 153, 0.2); color: var(--secondary-accent); }
   .c-comparative__table .feature-column { text-align: left; font-weight: 500; color: var(--text-primary); width: 25%; }
   .c-comparative__table .col-academia, .c-comparative__table .col-cachimbo, .c-comparative__table .col-combo { width: 25%; font-size: 1.5rem; }
   .c-comparative__table .col-cachimbo { background-color: rgba(139, 92, 246, 0.05); }
   .c-comparative__table .col-combo { background-color: rgba(52, 211, 153, 0.05); }
   .c-comparative__table .subtext { display: block; font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
   
   .c-comparative__cta { padding: 100px 0; text-align: center; }
   .c-comparative__fomo { margin: 32px 0; font-size: 1.125rem; color: var(--text-secondary); }
   .c-comparative__fomo #fomo-count { font-weight: 700; color: var(--secondary-accent); transition: transform 0.2s ease; display: inline-block; }
   .c-comparative__fomo #fomo-count.updated { transform: scale(1.2); }