/* ===== Responsive fixes for header & footer (drop-in overrides) ===== */ /* Load this AFTER your existing basica.css in every page. */ /* 0) Universal safe defaults */ img { max-width: 100%; height: auto; } /* 1) Viewport note (must be added in HTML ): */ /* 2) HEADER (menu) */ #cap-nou{ /* keep your existing styling; ensure it doesn't overflow on small screens */ gap: 16px; padding: 12px 16px; } /* logo sizing guard */ #cap-nou .logo img { max-height: 48px; height: auto; width: auto; } /* Menu layout improvements */ .menu-nou{ display: flex; flex-wrap: wrap; /* allow wrapping onto 2 lines if needed */ gap: 16px; align-items: center; justify-content: flex-end; list-style: none; margin: 0; padding: 0; overflow-x: auto; /* if it still overflows on narrow screens, allow horizontal scroll */ -webkit-overflow-scrolling: touch; } /* Links */ .menu-nou li a{ display: inline-block; text-decoration: none; line-height: 1.2; padding: 8px 6px; white-space: nowrap; /* prevents mid-word wrap */ } /* On mid screens, reduce spacing so it fits better */ @media (max-width: 1200px){ .menu-nou{ gap: 12px; } .menu-nou li a{ padding: 8px 4px; } } /* On small screens, change the header strategy: - Make header non-fixed to avoid overlapping content - Stack menu below the logo, full-width */ @media (max-width: 900px){ body { padding-top: 0 !important; } /* your body had padding-top for fixed header; remove it on small screens */ #cap-nou{ position: static !important; /* was fixed; let it be in normal flow on small devices */ flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; padding: 12px 16px; } .menu-nou{ width: 100%; justify-content: flex-start; flex-wrap: wrap; row-gap: 8px; } .menu-nou li a{ padding: 8px 6px; font-size: 0.95rem; } #contenidor{ padding-top: 24px; } /* small breathing room since header is no longer fixed */ } /* Very small phones */ @media (max-width: 360px){ .menu-nou{ gap: 8px; } .menu-nou li a{ font-size: 0.9rem; } } /* 3) FOOTER */ #peu{ width: 100%; margin-top: auto; padding: 28px 16px; } .peu-grid{ display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; justify-items: center; text-align: center; } /* Put the links in a neat cluster that can wrap */ .footer-links{ display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: center; } .footer-links ul{ list-style: none; margin: 0; padding: 0; } /* Larger screens: three columns and left align */ @media (min-width: 700px){ .peu-grid{ grid-template-columns: 1fr 1fr 1fr; justify-items: stretch; text-align: left; } .footer-links{ justify-content: center; gap: 32px; } } @media (min-width: 1100px){ #peu{ padding: 40px 20px; } } /* 4) Typographic guards for long labels */ .footer-links a, .menu-nou a{ word-break: keep-all; overflow-wrap: anywhere; } /* 5) Container max-widths: keep content narrow on large screens */ #contenidor, .empresa-wrapper, .quehacemos-wrapper{ max-width: 1200px; margin-inline: auto; padding-inline: 16px; } /* === Logo del header més gran i responsive === */ /* Controla l'alçada màxima del logo amb clamp (min, preferida, max) */ :root{ --logo-h: clamp(48px, 8vw, 80px); /* puja/baixa aquests valors si vols */ } /* Assegura layout del header i centrats verticals */ #cap-nou{ display: flex; align-items: center; gap: clamp(8px, 2vw, 24px); padding: clamp(8px, 1.6vw, 16px) clamp(12px, 3vw, 24px); } /* Logo: limita per alçada, manté proporció i evita desbordaments estranys */ #cap-nou .logo a{ display: inline-flex; align-items: center; } #cap-nou .logo img{ display: block; height: auto; max-height: var(--logo-h); width: auto; } /* El menú ocupant l'espai restant i amb wrap si cal */ .menu-nou{ flex: 1; display: flex; flex-wrap: wrap; gap: clamp(8px, 1.6vw, 16px); justify-content: flex-end; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* En pantalles petites, una mica més petit perquè no tapi el menú */ @media (max-width: 900px){ :root{ --logo-h: clamp(40px, 12vw, 72px); } } /* Contenidor responsive per a l'iframe (16:9) */ .infografia-video{ position: relative; width: 100%; aspect-ratio: 16 / 9; /* navegadors moderns */ background: #000; /* mentre carrega */ border-radius: 12px; overflow: hidden; } /* Fallback si aspect-ratio no està suportat */ @supports not (aspect-ratio: 16 / 9){ .infografia-video{ height: 0; padding-bottom: 56.25%; } } .infografia-video iframe{ position: absolute; inset: 0; /* top/right/bottom/left: 0 */ width: 100%; height: 100%; border: 0; display: block; }