/* ═══════════════════════════════════════════════════════════════════════ BLP Chile — mobile.css Optimización EXCLUSIVA para celulares. Todas las reglas viven dentro de media queries (≤768px): en escritorio este archivo no cambia ni un pixel. Se carga al final del en todas las páginas para poder corregir maquetación escrita con estilos inline (de ahí los !important y los selectores por atributo [style*="…"]). ═══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────── CELULARES (≤768px) ───────────────────────────────────────────── */ @media (max-width: 768px) { /* ── Base: nada puede empujar la página a lo ancho ── */ html, body { max-width: 100vw; overflow-x: hidden; } iframe, video, embed, object { max-width: 100%; } /* Varias columnas llevan `flex: 1; min-width: 300px|320px` en el atributo style para repartirse en dos en escritorio. En un teléfono angosto ese mínimo es MÁS ancho que el hueco disponible (a 320px de pantalla quedan 294 útiles tras los márgenes), así que la columna se salía del borde. Ojo con cómo se arregla: quitar sólo el mínimo NO basta y de hecho empeora las cosas. Esas columnas son `flex: 1` dentro de un contenedor con `flex-wrap: wrap`, y lo único que las obligaba a bajar de línea era justamente ese mínimo; sin él caben las dos en la misma fila, a ~170px cada una, y el contenido se monta uno sobre otro (fue lo que pasó en la tarjeta de WhatsApp de Contacto). Por eso además del mínimo se fija la base al 100%: así cada columna ocupa una fila entera, que es como deben leerse en el teléfono. */ [style*="min-width: 300px"], [style*="min-width: 320px"], [style*="min-width:300px"], [style*="min-width:320px"] { min-width: 0 !important; flex-basis: 100% !important; } /* ══ MENÚ ══════════════════════════════════ Estas reglas van blindadas a propósito. El panel se vio roto en teléfonos que conservaban una versión antigua de styles.css en caché: sin el override móvil, .nav-dropdown mantiene la posición ABSOLUTA del escritorio (left:50% + translateX(-50%) sobre un .nav-item angosto), se sale del panel por la izquierda y deja un hueco blanco donde deberían ir los enlaces. Redeclarar aquí lo esencial hace que el menú se vea bien aunque esa hoja llegue vieja. */ .nav-menu { background: #fff !important; width: auto !important; } /* El desplegable va en el flujo, ocupando el ancho del panel. */ .nav-dropdown { position: static !important; transform: none !important; left: auto !important; right: auto !important; top: auto !important; min-width: 0 !important; width: 100% !important; box-shadow: none !important; opacity: 1 !important; pointer-events: auto !important; } /* Plegado por defecto; main.js abre uno a la vez con .abierto. */ .nav-menu .nav-item--sub > .nav-dropdown { display: none !important; } .nav-menu .nav-item--sub.abierto > .nav-dropdown { display: block !important; } /* Enlaces del desplegable siempre legibles sobre el panel blanco. */ .nav-menu .nav-dropdown a { display: block !important; color: var(--muted, #4a5568) !important; text-shadow: none !important; opacity: 1 !important; white-space: normal !important; } .nav-menu .nav-dropdown a.nav-dropdown-todo { display: block !important; color: var(--blue, #002d92) !important; font-weight: 700 !important; } /* Entrada suave del panel (antes aparecía de golpe). */ .nav-menu.open { animation: blpMenuIn .22s ease both; } @keyframes blpMenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* La hamburguesa se convierte en X mientras el menú está abierto: main.js ya sincroniza aria-expanded en el botón. */ #navToggle span { transition: transform .25s ease, opacity .2s ease; } #navToggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #navToggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } #navToggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Separación sutil entre entradas del panel para tocar sin errar. */ .nav-menu .nav-item + .nav-item { border-top: 1px solid #f1f5f9; } .nav-menu .nav-item.nav-cta { border-top: none; } /* ══ TIPOGRAFÍA INLINE ═════════════════════ Muchas páginas traen títulos con font-size fijo en el atributo style (2.25rem = 36px llena media pantalla de un teléfono). Se rebajan a un tamaño de celular sin tocar el HTML. */ h2[style*="font-size: 2.25rem"] { font-size: 1.6rem !important; } h2[style*="font-size: 2.1rem"] { font-size: 1.55rem !important; } h2[style*="font-size: 2rem"] { font-size: 1.5rem !important; } h2[style*="font-size: 1.8rem"], h3[style*="font-size: 1.9rem"], h3[style*="font-size: 1.8rem"] { font-size: 1.4rem !important; } h3[style*="font-size: 1.65rem"] { font-size: 1.35rem !important; } /* El texto justificado en columnas angostas deja ríos de espacios. */ main p[style*="text-align: justify"], main p[style*="text-align:justify"] { text-align: left !important; } /* ══ SECCIONES CON RELLENO GIGANTE INLINE ══ 8rem/6rem de aire vertical son de escritorio; en el teléfono dejan pantallas casi vacías entre secciones. */ section[style*="padding: 8rem"] { padding: 3.5rem 0 !important; } section[style*="padding: 6rem"] { padding: 3.25rem 0 !important; } /* ══ PIE ═══════════════════════════════════ La columna de marca ya se centra (logo, texto y redes), pero los sellos se quedaban pegados a la izquierda y rompían ese eje. */ .footer-sellos { justify-content: center; } /* ══ CONTENIDO SIEMPRE VISIBLE ═════════════ Varias secciones esconden su contenido con opacity:0 y esperan a que el JS les ponga una clase al entrar en pantalla. En celular eso dejó las noticias invisibles: el observador exigía ver un 30% de una sección de 3080px en una pantalla de 844 (imposible: el máximo es 27%). Ya está corregido en main.js, pero aquí se garantiza además desde el CSS, que es lo que evita que un archivo JS viejo en caché vuelva a ocultarlas. En el teléfono estas entradas aportan poco y el riesgo es alto. */ .blog:not(.cards-dropped) .blog-row, .blog:not(.cards-dropped) .blog-card, .blog:not(.cards-dropped) .blog-horizontal-card, .linkedin-posts:not(.cards-dropped) .linkedin-card, .products:not(.images-dropped) .pcard, .reveal-fade-up, .reveal-drop { opacity: 1 !important; transform: none !important; animation: none !important; } /* ══ PORTADA ═══════════════════════════════ */ /* LinkedIn: una tarjeta por fila y sin desborde en pantallas de 320px (la grilla inline usa minmax(320px, 1fr), que no cabe ahí). */ .linkedin-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; } /* Noticias apiladas: el video/miniatura toma proporción 16:9 en vez de una franja de 200px que cortaba los videos de YouTube. */ .blog-row-media { aspect-ratio: 16 / 9; min-height: 0; height: auto; } /* Encabezado del blog: título y botón "Ver Todos" apilados y centrados. */ .blog .section-head:not(.center-text) { flex-direction: column; align-items: center; text-align: center; gap: .75rem; } /* ══ SELLOS TÉCNICOS ═══════════════════════ Iban en fila (icono | título | descripción) y los tres se repartían el ancho del teléfono: al título le quedaban ~90px y se partía en dos o tres líneas ("Ecofriendly / - 0 / Emisiones"). Se pasa a rejilla, el mismo patrón que las capacidades de Industria: el icono ocupa las dos filas de la izquierda y a la derecha van título y descripción, cada uno con todo el ancho restante. */ .tech-badge-item { display: grid; grid-template-columns: 58px 1fr; gap: .15rem 1rem; align-items: center; text-align: left; padding: 1.35rem 1.25rem; } .tech-badge-img { grid-column: 1; grid-row: 1 / span 2; height: 58px; margin-bottom: 0; align-self: center; } .tech-badge-title { grid-column: 2; margin-bottom: 0; align-self: end; } .tech-badge-desc { grid-column: 2; align-self: start; } /* ══ CINTAS CTA CON FLEX INLINE ════════════ (Industria, Torres Solares, Otros Productos: título a la izquierda y botón a la derecha; apilados quedan descentrados.) */ .cta-band .container[style*="space-between"] { flex-direction: column; text-align: center; justify-content: center; gap: 1.25rem; } .cta-band .container[style*="space-between"] .btn { width: 100%; justify-content: center; } /* ══ NOSOTROS ══════════════════════════════ */ /* El sello "EXPERIENCIA Y LIDERAZGO" sobre la foto ocupaba media imagen. */ .hover-3d-card div[style*="padding: 1.5rem 2rem"] { padding: .8rem 1.1rem !important; font-size: 1rem !important; } /* ══ FICHAS DE PRODUCTO (producto-detalle) ═ */ /* Banner azul "¿Quieres evaluar factibilidad?": relleno de teléfono y botones a lo ancho para pulgar. */ div[style*="padding: 2rem 3rem"] { padding: 1.5rem 1.25rem !important; } div[style*="padding: 2rem 3rem"] a[href*="wa.me"], div[style*="padding: 2rem 3rem"] button { width: 100%; justify-content: center !important; } div[style*="padding: 2rem 3rem"] > div[style*="flex-wrap"] { width: 100%; } /* ══ CONTACTO ══════════════════════════════ */ /* Tarjeta del formulario: 2.5rem de relleno dejaba campos de 230px. */ .contact-card { padding: 1.5rem 1.15rem !important; } /* Tarjeta de WhatsApp (clases añadidas en el HTML). */ .wa-card { padding: 1.5rem 1.25rem !important; } .wa-perfil { border-right: none !important; padding-right: 0 !important; margin-bottom: 1.5rem !important; } .wa-accion { padding-left: 0 !important; } .wa-accion .btn-submit { width: 100% !important; align-self: stretch !important; } /* El mapa se apila bajo los botones: sin esto colapsaba a 0px de alto (el iframe va en posición absoluta dentro de la columna). */ .mapa-frame { min-height: 320px; width: 100%; } /* ══ TABLA TÉCNICA → TARJETAS ══════════════ La tabla de especificaciones tiene dos columnas (característica y descripción) y en celular se resolvía con desplazamiento horizontal: entraba en pantalla apenas media columna y había que arrastrar para leer cada fila, sin ninguna pista de que se podía. Al ser sólo dos columnas se puede apilar sin perder la relación dato–valor: cada fila pasa a ser una tarjeta con el nombre arriba y la descripción debajo. */ .premium-table-wrapper { overflow-x: visible !important; } .premium-table { min-width: 0 !important; display: block; } .premium-table thead { display: none; } /* los rótulos se vuelven redundantes */ .premium-table tbody { display: block; } .premium-table tr { display: block; padding: 1rem 1.15rem; border-bottom: 1px solid rgba(79, 175, 79, .2); } .premium-table tr:last-child { border-bottom: none; } .premium-table td { display: block; width: auto !important; padding: 0 !important; border: none !important; background: transparent !important; } /* Nombre de la característica: hace de título de la tarjeta. */ .premium-table td:first-child { margin-bottom: .35rem; line-height: 1.25; } .premium-table td:first-child .table-feature-title { font-size: 1rem; } .premium-table td:first-child .table-feature-title svg { flex-shrink: 0; } .premium-table td + td { font-size: .95rem; line-height: 1.55; } /* ══ POSTACIÓN SOLAR ═══════════════════════ */ /* Las 4 tarjetas de beneficios iban en 2 columnas inline: a lo ancho del teléfono quedaban celdas de ~150px ilegibles. */ .posta-cards { grid-template-columns: 1fr !important; gap: 1rem !important; } /* Miniaturas de luminarias: un poco más de aire entre ellas. */ .posta-vistas { gap: .6rem !important; } /* ══ AVISO EMERGENTE ═══════════════════════ Ocupaba casi media pantalla del teléfono (foto 2:1 + título + texto + dos botones + la fila del asistente) sobre el contenido que el visitante estaba leyendo. Se compacta: la foto baja a 2.4:1, el texto descriptivo se recorta a una línea y el botón del asistente pierde su segunda línea. Sigue estando todo, ocupando bastante menos. */ .blp-aviso-media { aspect-ratio: 2.4 / 1 !important; } .blp-aviso-play { width: 44px !important; height: 44px !important; } .blp-aviso-txt { margin-bottom: .7rem !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blp-aviso-ia { margin-top: .6rem !important; padding-top: .6rem !important; } .blp-aviso-ia-txt span { display: none; } /* El botón de cerrar necesita área de toque de dedo, no de puntero. */ .blp-aviso-x { width: 36px !important; height: 36px !important; } } /* ───────────────────────────────────────────── CELULARES ANGOSTOS (≤660px) ───────────────────────────────────────────── */ @media (max-width: 660px) { /* Nosotros → Proyectos Ejecutados: la foto panorámica ocupa 2 columnas de la grilla (grid-column: span 2 inline). Cuando sólo cabe una columna, ese span fuerza una segunda pista de 300px y desborda la página hacia el costado. */ figure[style*="span 2"] { grid-column: auto !important; } /* Alturas fijas de galería pensadas para escritorio. */ figure img[style*="height: 255px"] { height: 210px !important; } } /* ───────────────────────────────────────────── CELULARES CHICOS (≤400px) ───────────────────────────────────────────── */ @media (max-width: 400px) { /* Los títulos inline bajan un punto más. */ h2[style*="font-size: 2.25rem"], h2[style*="font-size: 2.1rem"], h2[style*="font-size: 2rem"] { font-size: 1.35rem !important; } /* La tabla técnica ya va apilada como tarjetas (bloque de 768px): sólo se aprieta la fila. NO se le devuelve relleno a las celdas — hacerlo reabría un hueco entre el nombre de la característica y su descripción, que aquí van una sobre otra y no lado a lado. */ .premium-table tr { padding: .85rem .95rem; } .premium-table td + td { font-size: .9rem; } /* Ficha de producto: los valores largos ("600W (4 x 150W)") no deben desbordar su celda. */ .spec-value { font-size: 1.05rem; overflow-wrap: anywhere; } /* Galería de producto un poco más baja para dejar visible la info. */ .main-image { height: 270px; } }