/* ===================================================================== MADRE SELVA · Landing · Atmósfera CARBÓN PREMIUM · v2 (corregida) Estado: PROPUESTA — NO DESPLEGADA. Requiere autorización expresa. Cargar DESPUÉS de module-gold-frames.css (último del ). Alcance (cerrado, auditado): 1. Tokens propios con prefijo --msc-* (no pisan variables existentes). 2. #sistema y .final → carbón mate grisáceo. 3. .ms-marquee → verde petróleo oscuro. 4. CTA opción B → franja inferior del hero (.ms-cta-band--hero) VISIBLE y reforzada; enlace original intacto. 5. .ms-cta-band--inside armonizada con la franja del hero. 6. Degradés de transición entre secciones (sin tocar secciones protegidas: el degradé vive en la sección vecina o en el contenedor .ms-v3 que las envuelve). Componentes protegidos (ningún selector toca su contenido, tarjetas, textos ni colores): #ms-hero · .stream («Un pedido mueve todo») · #por-dentro · #ms-evolution (BASE/PRO/PREMIUM) · #ms-official-tour (video) · .ms-footer · formularios · capturas · enlaces. Única excepción autorizada (Manu, 27/10): #asistentes recibe SOLO un degradé en su fondo superior; tarjetas SELVA IA / IA PRO intactas. «Un vistazo por dentro» recibe su degradé en el contenedor .ms-v3. Sin selectores globales (*, body, html, h1-h6, a, p, img, button, section sueltos) y sin estilos de la opción A ni de alternativas rechazadas. USO DE !important — inventario exacto: 13 declaraciones, todas sobre selectores con id o clases específicas, nunca globales: · Bloque 1-2: fondos de #sistema, .final y .ms-marquee. · Bloque 6: padding y fondo de .ms-sale-real, #sistema + .section, #asistentes, #ms-selva-historia, .faq-section y .final. Motivo: la hoja vigente ya fija esos padding/fondos con !important (regla .section y regla de fondo de la historia); sin él, los cambios aprobados no se aplican. El CTA (bloque 3) NO usa !important. ===================================================================== */ :root { --msc-carbon: #1F1F1D; /* carbón mate grisáceo */ --msc-carbon-2: #262624; /* grafito (degradé sutil) */ --msc-petrol: #0F2E2C; /* verde petróleo oscuro */ --msc-gold: #E3C77E; /* dorado institucional */ --msc-gold-deep: #C9A663; /* dorado profundo (botón actual) */ --msc-gold-line: rgba(227, 199, 126, 0.28); --msc-ink: #1F1B16; /* texto sobre dorado */ } /* ---------- 1. Secciones oscuras existentes → carbón grisáceo ---------- */ /* !important: la hoja vigente fija estos fondos con !important; sin él el carbón no se aplica (detectado en la verificación del 27/10). */ section#sistema.section.dark, section.final { background-color: var(--msc-carbon) !important; background-image: linear-gradient(180deg, var(--msc-carbon-2) 0%, var(--msc-carbon) 100%) !important; } /* ---------- 2. Marquesina → verde petróleo oscuro ---------- */ section.ms-marquee { background-color: var(--msc-petrol) !important; } /* ---------- 3. CTA 14 días · OPCIÓN B (franja inferior del hero) ---------- El bloque vive FUERA de #ms-hero (es hermano siguiente), por eso no altera ni el degradado, ni fotos, ni textos, ni animaciones del hero. Se fuerza display:block por especificidad (0,3,0), sin !important, para anular cualquier ocultamiento previo de la propuesta v1. */ div.ms-cta-band.ms-cta-band--hero { display: block; position: relative; padding: 40px 20px 44px; text-align: center; background-color: var(--msc-carbon); background-image: radial-gradient(60% 120% at 50% 0%, rgba(227, 199, 126, 0.10) 0%, rgba(227, 199, 126, 0) 70%), linear-gradient(180deg, #0C0B09 0, var(--msc-carbon) 64px); } div.ms-cta-band.ms-cta-band--hero::before { /* filete dorado central */ content: ""; position: absolute; top: -1px; left: 50%; width: min(220px, 40%); height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(227, 199, 126, 0), var(--msc-gold), rgba(227, 199, 126, 0)); pointer-events: none; } div.ms-cta-band.ms-cta-band--hero a.ms-cta-gold { display: inline-block; min-height: 48px; /* objetivo táctil ≥ 44 px */ padding: 16px 40px; border-radius: 999px; background-image: linear-gradient(180deg, #EBD397 0%, var(--msc-gold-deep) 100%); color: var(--msc-ink); font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-decoration: none; box-shadow: 0 0 0 1px rgba(227, 199, 126, 0.55), 0 12px 30px rgba(0, 0, 0, 0.35); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } div.ms-cta-band.ms-cta-band--hero a.ms-cta-gold:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 0 0 1px rgba(227, 199, 126, 0.8), 0 16px 34px rgba(0, 0, 0, 0.42); } div.ms-cta-band.ms-cta-band--hero a.ms-cta-gold:focus-visible { outline: 2px solid var(--msc-gold); outline-offset: 4px; } /* ---------- 4. Franja CTA de «Un vistazo por dentro» (armonizada) ---------- */ div.ms-cta-band.ms-cta-band--inside a.ms-cta-gold:focus-visible { outline: 2px solid var(--msc-gold); outline-offset: 4px; } /* ---------- 5. Responsive ---------- */ @media (max-width: 640px) { div.ms-cta-band.ms-cta-band--hero { padding: 28px 16px 32px; } div.ms-cta-band.ms-cta-band--hero a.ms-cta-gold { display: block; width: 100%; max-width: 360px; margin: 0 auto; padding: 15px 20px; } } @media (prefers-reduced-motion: reduce) { div.ms-cta-band.ms-cta-band--hero a.ms-cta-gold { transition: none; } div.ms-cta-band.ms-cta-band--hero a.ms-cta-gold:hover { transform: none; } } /* ---------- 6. Degradés de transición entre secciones ---------- Cada degradé (80 px) vive en la sección NO protegida de cada límite, o en el contenedor .ms-v3 que envuelve a una protegida. Se suma el mismo alto al padding para que ningún texto quede sobre el degradé. Colores = color real de la sección vecina (medido en producción). Límite sin degradé: «Costos claros» (#sistema), que es una tarjeta redondeada con márgenes laterales sobre el gris: un degradé de ancho completo chocaría con sus esquinas. */ :root { --msc-fade: 80px; --msc-gray: #E8E8E5; /* fondo general aprobado */ --msc-gray-0: rgba(232, 232, 229, 0); --msc-black: #11110F; /* «Un pedido mueve todo» y video */ --msc-warm: #F7F4EE; /* «Un vistazo por dentro» */ --msc-warm-0: rgba(247, 244, 238, 0); --msc-band: #26231E; /* franja CTA interior */ --msc-foot: #161512; /* footer */ } /* Franja CTA → «Para quien dirige» (reemplaza el corte corto de 58 px) */ body section.section.ms-sale-real { background-image: linear-gradient(180deg, var(--msc-carbon) 0, var(--msc-gray) var(--msc-fade)); padding-top: calc(30px + var(--msc-fade)) !important; } /* «De la prueba a la versión final» → «Un pedido mueve todo» */ body section#sistema + section.section { background-image: linear-gradient(180deg, var(--msc-gray-0) calc(100% - var(--msc-fade)), var(--msc-black) 100%); padding-bottom: calc(30px + var(--msc-fade)) !important; } /* «Un pedido mueve todo» → «Un vistazo por dentro» (en el contenedor, no en las secciones) */ body div.ms-v3:has(> section#por-dentro) { padding-top: var(--msc-fade); background: linear-gradient(180deg, var(--msc-black) 0, var(--msc-warm) 100%) top / 100% var(--msc-fade) no-repeat; } /* «Un vistazo por dentro» → franja CTA interior → «Conocé lo que se vendió» */ body div.ms-cta-band.ms-cta-band--inside { background-image: linear-gradient(180deg, var(--msc-warm) 0, rgba(38, 35, 30, 0) var(--msc-fade)), linear-gradient(180deg, rgba(38, 35, 30, 0) calc(100% - var(--msc-fade)), var(--msc-gray) 100%); padding-top: calc(44px + var(--msc-fade)); padding-bottom: calc(44px + var(--msc-fade)); } /* Carrusel interior → video oficial */ body div.ms-v3.ms-interior-carousel { background-image: linear-gradient(180deg, var(--msc-warm-0) calc(100% - var(--msc-fade)), var(--msc-black) 100%); padding-bottom: calc(64px + var(--msc-fade)); } /* Video oficial → SELVA IA / IA PRO (autorizado por Manu 27/10: SOLO el fondo superior de la sección; tarjetas, colores y textos intactos) */ body section#asistentes.section.ms-ai { background-image: linear-gradient(180deg, var(--msc-black) 0, var(--msc-gray-0) var(--msc-fade)) !important; padding-top: calc(34px + var(--msc-fade)) !important; } /* Historia → marquesina */ body section#ms-selva-historia.section { background-image: linear-gradient(180deg, var(--msc-gray-0) calc(100% - var(--msc-fade)), var(--msc-petrol) 100%) !important; padding-bottom: calc(30px + var(--msc-fade)) !important; } /* Marquesina → preguntas → cierre (reemplaza el corte corto de 34 px) */ body section.section.faq-section { background-image: linear-gradient(180deg, var(--msc-petrol) 0, var(--msc-gray-0) var(--msc-fade)), linear-gradient(180deg, var(--msc-gray-0) calc(100% - var(--msc-fade)), var(--msc-carbon-2) 100%); padding-top: calc(42px + var(--msc-fade)) !important; padding-bottom: calc(42px + var(--msc-fade)) !important; } /* Cierre → footer (oscuro con oscuro: sin padding extra) */ body section.final { background-image: linear-gradient(180deg, var(--msc-carbon-2) 0, var(--msc-carbon) calc(100% - var(--msc-fade)), var(--msc-foot) 100%) !important; } @media (max-width: 640px) { :root { --msc-fade: 56px; } }