/** * Ajustes responsive exclusivos de index.html (hero, secciones, CTA, etc.). * El navbar en móvil se unificó con portal en infolab-europa-website.webflow.css (≤767px). * Requiere: */ @media screen and (max-width: 991px) { /* Hero: más aire y ancho útil; el logo no queda en un “mitad de pantalla” rígido */ body#pagina-inicio .hero-section-title { height: auto; min-height: min(68vh, 34rem); padding-top: clamp(0.75rem, 3vw, 1.5rem); padding-bottom: clamp(0.5rem, 2vw, 1rem); box-sizing: border-box; } body#pagina-inicio .hero-sticky { position: relative; top: auto; flex-shrink: 0; } body#pagina-inicio .sticky-holder { position: relative; width: 100%; padding-left: max(0px, env(safe-area-inset-left, 0px)); padding-right: max(0px, env(safe-area-inset-right, 0px)); } body#pagina-inicio .hero-big-heading { position: relative; width: 100%; max-width: 100%; align-items: center; gap: clamp(0.2rem, 1.2vw, 0.45rem); padding-left: 0.25rem; padding-right: 0.25rem; box-sizing: border-box; } body#pagina-inicio .second-heading { margin-top: clamp(0.05rem, 0.8vw, 0.35rem); } body#pagina-inicio .mobile-holder { width: 100%; max-width: min(22rem, 100%); height: auto; min-height: clamp(160px, 28vw, 220px); margin-top: clamp(0.35rem, 2vw, 0.75rem); flex-shrink: 0; } body#pagina-inicio .hero-paragraph { padding-top: clamp(1.75rem, 5vw, 3.5rem); padding-bottom: clamp(0.5rem, 2vw, 1rem); width: 100%; max-width: 100%; box-sizing: border-box; } body#pagina-inicio .hero-paragraph-holder, body#pagina-inicio .hero-paragraph-holder--stacked { max-width: 100%; padding-left: 0.125rem; padding-right: 0.125rem; box-sizing: border-box; } body#pagina-inicio .hero-section .big-heading { font-size: clamp(1.35rem, 5.2vw + 0.35rem, 2.65rem); line-height: 1.12; letter-spacing: -0.035em; } /* Orbes de fondo: menos probabilidad de desbordar horizontalmente */ body#pagina-inicio .hero-section-wrapper .white-circle { width: min(92vw, 26rem); height: min(92vw, 26rem); max-width: 100%; } body#pagina-inicio .hero-color-overlay { height: clamp(72px, 14vw, 120px); } /* Títulos de sección: menos tracking fijo al partir líneas */ body#pagina-inicio .audience-heading, body#pagina-inicio .pricing-heading, body#pagina-inicio .section-heading { letter-spacing: -0.03em; max-width: 100%; padding-left: 0.25rem; padding-right: 0.25rem; box-sizing: border-box; } body#pagina-inicio .header-wrapper { max-width: 100%; padding-left: 0.125rem; padding-right: 0.125rem; box-sizing: border-box; } /* CTA: ritmo vertical similar al resto de bloques */ body#pagina-inicio .cta-centerCB { padding-top: clamp(2rem, 5vw, 3.25rem); padding-bottom: clamp(2rem, 5vw, 3.25rem); } body#pagina-inicio .cta-cubheading { font-size: clamp(0.95rem, 2.4vw + 0.2rem, 1.125rem); line-height: 1.55; max-width: 36rem; margin-left: auto; margin-right: auto; } body#pagina-inicio .cta-heading { max-width: 100%; } body#pagina-inicio .cta-wrapper { border-radius: clamp(12px, 2.5vw, 20px); } /* Tarjetas: cómodas al pulsar y al leer en columna */ body#pagina-inicio .audience-card.audience-card--surface { padding: clamp(1.05rem, 3vw, 1.35rem) clamp(1rem, 3vw, 1.3rem) clamp(1.1rem, 3vw, 1.4rem); } } @media screen and (max-width: 479px) { /* En móviles muy estrechos, evitar padding vertical excesivo heredado de .container genérico */ body#pagina-inicio .w-layout-blockcontainer.container.w-container { padding-top: clamp(1.25rem, 4vw, 2rem); padding-bottom: clamp(1.25rem, 4vw, 2rem); } body#pagina-inicio .audience-wrapper, body#pagina-inicio .pricing-wrapper, body#pagina-inicio .faq-wrapper { padding-top: clamp(1.25rem, 4vw, 2rem) !important; padding-bottom: clamp(1.25rem, 4vw, 2rem) !important; } body#pagina-inicio .primary-button { width: 100%; max-width: min(20rem, 100%); justify-content: center; } }