/* ===== InterFoodCo — One Page Site ===== */ :root { --navy-900: #00193a; --navy-800: #0b1f3f; --navy-700: #14315e; --navy-600: #1c4380; --gold-300: #f6e58d; --gold-400: #e6c667; --gold-500: #d9b44a; --gold-600: #a9761f; --cream: #faf6ee; --white: #ffffff; --ink: #21242b; --muted: #6b7280; --radius: 14px; --shadow: 0 10px 30px rgba(11, 31, 63, 0.12); --shadow-sm: 0 4px 14px rgba(11, 31, 63, 0.08); --maxw: 1180px; --ff-serif: 'Playfair Display', Georgia, serif; --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* El header es sticky y mide ~99px: sin esto, al llegar a una sección desde el menú el título queda por debajo del header. Se aplica a todas las secciones con ancla para que el comportamiento sea el mismo en todas. */ section[id] { scroll-margin-top: 110px; } @media (max-width: 899px) { section[id] { scroll-margin-top: 92px; } } #inicio { scroll-margin-top: 0; } /* el hero ocupa la pantalla entera */ /* Las animaciones de entrada (.reveal-right) desplazan elementos 70px a la derecha ANTES de dispararse y eso agrandaba el documento: 46px de scroll horizontal y una franja vacía al costado en cualquier ancho menor a 1280px. Va en porque Chromium no propaga al viewport el overflow-x del . Es `clip` y no `hidden` a propósito: `clip` recorta sin crear un contenedor de scroll, así que no rompe el header fijo, ni position: sticky, ni el scroll vertical suave. */ html, body { overflow-x: clip; } body { font-family: var(--ff-sans); color: var(--ink); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--ff-serif); font-weight: 700; line-height: 1.2; } .eyebrow { display: inline-block; font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-600); font-weight: 600; margin-bottom: 10px; } .section-head { max-width: 620px; margin: 0 auto 48px; text-align: center; } .section-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: var(--navy-800); } .section-head p { color: var(--muted); margin-top: 12px; font-size: 1.05rem; } section { padding: 88px 0; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; cursor: pointer; border: none; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; font-family: var(--ff-sans); } .btn-gold { background: linear-gradient(135deg, var(--gold-300), var(--gold-600)); color: var(--navy-900); } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217, 180, 74, 0.4); } .btn-outline { background: transparent; border: 1.5px solid rgba(255,255,255,0.6); color: var(--white); } .btn-outline:hover { background: rgba(255,255,255,0.12); } /* ===== Header ===== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--navy-900); transition: box-shadow 0.3s ease; } .site-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,0.25); } .nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; max-width: var(--maxw); margin: 0 auto; } /* El logo no se achica nunca: sin flex-shrink: 0 el navegador lo comprimía hasta un 37% en tabletas (768-899px) y deformaba la marca. */ .brand { display: flex; align-items: center; flex-shrink: 0; } .brand img { height: 75px; width: auto; flex-shrink: 0; } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { color: var(--white); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.3px; opacity: 0.88; transition: opacity 0.2s ease; } .nav-links a:hover { opacity: 1; color: var(--gold-400); } .nav-right { display: flex; align-items: center; gap: 18px; } .lang-toggle { display: flex; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; overflow: hidden; } .lang-toggle button { background: transparent; border: none; color: var(--white); padding: 6px 14px; font-size: 0.8rem; font-weight: 700; cursor: pointer; opacity: 0.6; } .lang-toggle button.active { background: var(--white); color: var(--navy-900); opacity: 1; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white); margin: 5px 0; } /* Evita el parpadeo de idioma al cargar: ver el