/* ================================================================ RESPONSIVE-MOBILE.CSS — Escuela de Influencia Comercial CÓMO USAR: 1. Descarga este archivo 2. Súbelo a la carpeta css/ de tu servidor (public_html/css/) 3. Agrega esta línea en el de tu index.html DESPUÉS del link a estilos_inicio.css: QUÉ CORRIGE: - Header: logo + menú + botón WhatsApp se apilan correctamente - Hero: Frank y el texto pasan a una sola columna - Títulos: font-size se reduce para no salirse de la pantalla - Menú: los ítems se envuelven en varias líneas y se centran - Pilares: se apilan verticalmente - Servicios B2B y B2C: ya tenían responsive, se refuerzan - Footer: se apila en una sola columna ================================================================ */ /* ================================================================ TABLET — pantallas de 1024px o menos (iPad, laptops pequeñas, ventanas reducidas) ================================================================ */ @media (max-width: 1024px) { /* --- HEADER --- */ /* El menú reduce el tamaño de letra para que quepan los ítems */ .nav-header a { font-size: 14px; /* Reducido de 20px a 14px */ } .nav-header ul { gap: 16px; /* Reducido de 40px a 16px entre ítems */ } /* La imagen de WhatsApp se achica un poco */ .img-ws { width: 70px; /* Reducido de 100px */ height: 70px; } /* --- HERO --- */ /* El hero pasa de 2 columnas a 1 columna apilada */ .hero-principal { flex-direction: column; /* Frank arriba, texto abajo */ align-items: center; /* Centra horizontalmente */ padding: 40px 20px; /* Menos padding lateral */ min-height: auto; /* Ya no necesita ocupar toda la pantalla */ gap: 30px; /* Espacio entre Frank y el texto */ text-align: center; /* Texto centrado */ } /* La figura de Frank ocupa el ancho completo */ .hero-figura { flex: 0 0 auto; /* Sin ancho fijo */ width: 100%; /* Ancho completo */ max-width: 400px; /* Pero no demasiado grande */ margin: 0 auto; /* Centra la figura */ } /* La imagen de Frank se achica en tablet */ .hero-figura img { height: 50vh; /* Menos alto que en escritorio */ width: 100%; } /* El contenido de texto ocupa el ancho completo */ .hero-contenido { flex: 0 0 auto; /* Sin ancho fijo */ width: 100%; /* Ancho completo */ padding-left: 0; /* Sin sangría izquierda */ text-align: center; /* Texto centrado */ } /* El título H1 se reduce */ .hero-titulo-principal { font-size: 2.2rem; /* Reducido de 3.2rem */ } /* El nombre del experto se centra */ .hero-nombre-experto { justify-content: center; /* Centra los elementos de la línea */ flex-wrap: wrap; /* Permite que se envuelvan */ } /* El botón CTA se centra */ .btn-hero-palpitante { margin-left: auto; margin-right: auto; display: flex; width: fit-content; } /* Los pilares se centran */ .hero-pilares { justify-content: center; /* Centra los 3 pilares */ flex-wrap: wrap; /* Permite que bajen si no caben */ } /* El subtítulo se centra */ .hero-subtitulo { margin-left: auto; margin-right: auto; text-align: center; } /* El logo triangulo se reduce */ .hero-logo-triangulo img { width: 70px; /* Reducido de 120px */ } /* Los títulos de sección se reducen */ .triangulo-articulos h2, .header-b2b h2, .header-b2c h2, .referencias h5 { font-size: 1.8rem; /* Reducido de 2.5rem */ } } /* ================================================================ MÓVIL GRANDE — pantallas de 768px o menos (celulares en horizontal, teléfonos grandes) ================================================================ */ @media (max-width: 768px) { /* --- HEADER COMPLETO --- */ /* El header se reorganiza: logo arriba, menú abajo */ .main-header { flex-wrap: wrap; /* Permite que los elementos bajen */ justify-content: center; /* Centra todo */ padding: 10px 4%; /* Menos padding */ gap: 8px; /* Espacio entre los elementos apilados */ } /* El logo se centra */ .logo-header { justify-content: center; width: 100%; /* Ocupa toda la línea */ margin-left: 0; } /* El logo se achica un poco */ .logo-header img { height: 60px; /* Reducido de 80px */ } /* El menú ocupa su propia fila */ .nav-header { width: 100%; /* Ocupa toda la línea */ justify-content: center; /* Centra el menú */ } /* Los ítems del menú se envuelven y centran */ .nav-header ul { flex-wrap: wrap; /* Permite que los ítems bajen a la siguiente línea */ justify-content: center; /* Centra todos los ítems */ gap: 8px 16px; /* 8px vertical, 16px horizontal */ } /* Los enlaces del menú se reducen */ .nav-header a { font-size: 12px; /* Texto pequeño para que quepan */ white-space: nowrap; /* Evita que un ítem se parta en dos líneas */ } /* El botón WhatsApp se centra en su propia fila */ .header-buton-whatsapp { width: 100%; /* Ocupa toda la línea */ justify-content: center; /* Se centra */ } /* La imagen de WhatsApp se achica más */ .img-ws { width: 50px; /* Más pequeño en móvil */ height: 50px; } /* --- HERO --- */ /* El héroe ocupa menos espacio vertical */ .hero-principal { padding: 30px 16px; /* Menos padding en celular */ gap: 20px; } /* Frank se achica más */ .hero-figura img { height: 40vh; /* Más pequeño en celular */ } /* El H1 se reduce bastante */ .hero-titulo-principal { font-size: 1.8rem; /* Más pequeño para que quepa */ } /* Los pilares se apilan en una sola fila centrada */ .hero-pilares { gap: 16px; /* Menos espacio entre pilares */ justify-content: center; } /* --- SECCIÓN MAIN Y SERVICIOS --- */ /* Menos padding en las secciones */ main, .seccion-servicios, .referencias { padding: 20px 4%; /* Menos padding lateral */ } /* Los títulos de sección se reducen más */ .triangulo-articulos h2, .header-b2b h2, .header-b2c h2, .referencias h5 { font-size: 1.5rem; /* Pequeño para celular */ letter-spacing: 1px; /* Menos espaciado */ } /* Los párrafos de encabezado se reducen */ .header-b2b p, .header-b2c p { font-size: 1rem; /* Reducido de 1.5rem */ padding: 2%; /* Menos padding */ } /* Las tarjetas B2B se apilan */ .servicios-b2b-grid { flex-direction: column; } /* Las tarjetas B2C se apilan */ .lista-b2c { flex-direction: column; } /* Los botones de marketing ocupan todo el ancho */ .boton-marketing-accion { width: 100%; max-width: 100%; min-width: auto; } /* El bloque de títulos SEO se centra */ .bloque-titulos-flex { align-items: center; /* Centra los títulos */ text-align: center; padding: 0 4%; } .bloque-titulos-flex h2 { font-size: 1rem; /* Más pequeño */ text-align: center; } /* --- COTIZACIÓN (por si acaso) --- */ .titulo-seccion-venta { font-size: 1.8rem; /* Reducido de 3rem */ } .grilla-problemas, .grilla-diagnostico { grid-template-columns: 1fr; /* Una columna en celular */ } /* --- FOOTER --- */ /* Las columnas del footer se apilan */ .contenedor-footer { flex-direction: column; /* Una columna */ align-items: center; /* Centrado */ gap: 20px; } .footer-column { width: 100%; /* Ancho completo */ min-width: auto; } } /* ================================================================ MÓVIL PEQUEÑO — pantallas de 480px o menos (iPhone SE, teléfonos compactos) ================================================================ */ @media (max-width: 480px) { /* El H1 del hero se reduce al máximo */ .hero-titulo-principal { font-size: 1.5rem; /* Tamaño mínimo legible */ letter-spacing: 0; /* Sin espaciado extra */ } /* Los ítems del menú aún más pequeños */ .nav-header a { font-size: 11px; } /* Los pilares se apilan en columna */ .hero-pilares { flex-direction: column; /* Una columna */ align-items: center; gap: 12px; } /* El botón CTA ocupa todo el ancho */ .btn-hero-palpitante { width: 100%; justify-content: center; text-align: center; font-size: 0.85rem; /* Texto más pequeño */ padding: 14px 20px; } /* Las tarjetas tienen menos padding */ .triangulo-articulos article, .servicios-b2b-grid li, .lista-b2c li { padding: 20px 16px !important; /* Menos padding en tarjetas */ } /* Los títulos de las tarjetas se reducen */ .servicios-b2b-grid h3, .lista-b2c h4 { font-size: 1.1rem; } /* El contenedor de cotización con menos padding */ .contenedor-venta { padding: 60px 12px 40px; } }