/* ========================================================================== VERSUS — SISTEMA DE DISEÑO Derivado de la home (index.html). Lo cargan las cuatro páginas. Reglas del sistema ------------------ TIPOGRAFÍA · Titulares → Awesome Serif ExtraTall, peso 100 (Thin). SIEMPRE. Nunca bold, nunca otra familia. · Texto → DM Sans (Google Fonts, cargada desde el ). · Etiquetas → DM Sans 500, 11px, versalitas, tracking 0.18em. COLOR (los mismos valores medidos en la home) · Fondo #f6f6f6 · Tarjetas #fff · Oscuro #27271d · Panel #34332b · Verde #273328 · Arena #cfc6b8 · Azul #dfe9f2 · Acento #777e66 FORMA · Botón 27px · Tarjeta 40px · Tarjeta grande 60px · Panel 100px · Botones de 54px de alto. MOVIMIENTO · Todo entra igual: opacidad 0 → 1 y 26px de subida, 0.8s. · Curva única: cubic-bezier(.22,.61,.36,1). · Hover: elevación de 2–6px, sin sombra. ========================================================================== */ /* ---------------------------------------------------------- TIPOGRAFÍAS --- */ /* Solo el corte Thin (100): nunca Light/Regular/Medium/Bold para esta familia. */ @font-face { font-family: "Awesome Serif"; src: url("../fonts/1-ExtraTallAwesomeSerif-Thin.woff") format("woff"); font-weight: 100; font-style: normal; font-display: swap; } /* DM Sans se carga por Google Fonts desde el (link a fonts.googleapis.com). */ /* ---------------------------------------------------------------- TOKENS --- */ :root { --vs-bg: #f6f6f6; --vs-bg-alt: #f7f7f7; --vs-white: #ffffff; --vs-dark: #27271d; --vs-panel: #34332b; --vs-green: #273328; --vs-blue: #dfe9f2; --vs-sand: #cfc6b8; --vs-cream: #ece7df; --vs-ink: #202317; --vs-accent: #777e66; --vs-muted: #757575; --vs-line: rgba(39, 51, 40, 0.16); --vs-display: "Awesome Serif", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --vs-text: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --vs-r-badge: 15px; --vs-r-btn: 27px; --vs-r-card: 40px; --vs-r-card-lg: 60px; --vs-r-panel: 100px; --vs-container: 1240px; --vs-gutter: clamp(26px, 6vw, 64px); --vs-section: clamp(64px, 9vw, 128px); --vs-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* =================================================== CABECERA COMPARTIDA === Réplica exacta del nav de la home: los mismos 1498px de lienzo, la pastilla de 550x66 en left:474 / top:30, el logo en 21/24 y la flecha en 510/23. Todo medido sobre el diseño original. Por debajo de 1498px el bloque se escala en proporción en lugar de recomponerse, para que no cambie de aspecto. ========================================================================== */ .site-header { position: relative; z-index: 70; /* la home tiene el lienzo justo debajo: el nav va encima */ width: 1498px; height: 96px; margin: 0 auto; transform-origin: top left; } .site-header__bar { position: absolute; left: 474px; top: 30px; width: 550px; height: 66px; background: #fff; border-radius: 33px; } .site-header__logo { position: absolute; left: 21px; top: 24px; width: 79px; height: 17px; } .site-nav { position: absolute; left: 175.4px; top: 0; height: 66px; padding-top: 2px; display: flex; align-items: center; gap: 28px; } .site-nav a { font-family: var(--vs-text); font-weight: 300; font-size: 14px; line-height: 1; letter-spacing: 0.2px; color: #202020; text-decoration: underline 1px transparent; text-underline-offset: 5px; white-space: nowrap; transition: text-decoration-color 0.22s ease, opacity 0.22s ease; } .site-nav a:hover { text-decoration-color: currentColor; opacity: 0.7; } .site-nav a[aria-current="page"] { text-decoration-color: currentColor; } .site-header__arrow { position: absolute; left: 510px; top: 23px; } .site-header__arrow img { width: 20px; height: 20px; transition: transform 0.28s var(--vs-ease); } .site-header__arrow:hover img { transform: translateX(4px); } .site-header__burger { display: none; } /* ======================================================= PIE COMPARTIDO === Réplica exacta del pie de la home. Las coordenadas del original iban en absoluto sobre la página (top: 4249px y siguientes); aquí se conservan tal cual, restando la base de 4240px. ========================================================================== */ .site-footer { position: relative; width: 1498px; height: 399px; margin: 0 auto; font-family: var(--vs-text); font-weight: 300; transform-origin: top left; } .site-footer > *, .site-footer__col > * { position: absolute; margin: 0; } /* la etiqueta del campo de email es solo para lectores de pantalla */ .hidden-label { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .site-footer__logo { left: 172px; top: 9px; width: 92px; height: 17px; } .site-footer__menu { left: 177px; top: 80px; list-style: none; padding: 0; } .site-footer__menu li { font-size: 11px; line-height: 24px; letter-spacing: 0.2px; } .site-footer__menu li a { color: #000; text-decoration: none; } .site-footer__col { position: absolute; left: 0; top: 0; width: 1498px; height: 0; } .site-footer h4 { font-family: var(--vs-text); font-weight: 400; font-size: 14px; line-height: 14px; letter-spacing: 0.2px; color: #000; } .site-footer p { font-size: 11px; line-height: 11px; letter-spacing: 0.2px; color: #000; } .site-footer a { color: #000; text-decoration: none; } .site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; } .site-footer .rule { height: 0.5px; background: #000; } .site-footer .f2-location { left: 375.5px; top: 10px; } .site-footer .f2-rule1 { left: 375.5px; top: 37px; width: 65px; } .site-footer .f2-loc { left: 375.5px; top: 50.5px; } .site-footer .f2-newsletter { left: 375.5px; top: 118px; } .site-footer .f2-rule2 { left: 375.5px; top: 145px; width: 77px; } .site-footer .f2-label { left: 375.5px; top: 162.5px; } .site-footer .f2-legal { left: 375.5px; top: 317.5px; letter-spacing: 0; } .site-footer .f2-label i { font-style: normal; color: var(--vs-accent); } .site-footer__input { left: 375.5px; top: 188px; width: 317px; height: 30px; border: 0; border-bottom: 0.5px solid #000; background: none; font-family: var(--vs-text); font-weight: 300; font-size: 12px; line-height: 12px; letter-spacing: 0.2px; color: #000; padding: 0 0 8px 16.2px; border-radius: 0; } .site-footer__input::placeholder { color: var(--vs-muted); opacity: 1; } .site-footer__input:focus { outline: none; } .site-footer__send { left: 375.5px; top: 227.5px; width: 317px; height: 35px; border: 0; border-radius: 10px; background: var(--vs-sand); font-family: var(--vs-display); font-weight: 300; font-size: 15px; line-height: 37px; letter-spacing: 0.124px; color: #000; padding: 0; cursor: pointer; transition: background-color 0.28s ease, color 0.28s ease, transform 0.28s var(--vs-ease); } .site-footer__send:hover { background: var(--vs-dark); color: #fff; transform: translateY(-2px); } .site-footer .f3-follow { left: 752.5px; top: 10px; } .site-footer .f3-rule3 { left: 752.5px; top: 37px; width: 67px; } .site-footer .f3-inquiries { left: 752.5px; top: 143px; } .site-footer .f3-rule4 { left: 752.5px; top: 169.5px; width: 62px; } .site-footer .f3-mail { left: 752.5px; top: 182.5px; } .site-footer .social a { position: absolute; font-size: 11px; line-height: 11px; letter-spacing: 0.2px; } .site-footer .f3-linkedin { left: 752.5px; top: 60.5px; } .site-footer .f3-behance { left: 815.7px; top: 60.5px; } .site-footer .f3-pinterest { left: 880.5px; top: 60.5px; } .site-footer .f3-instagram { left: 752.5px; top: 80.5px; } .site-footer .f3-facebook { left: 823.2px; top: 80.5px; } .site-footer p.site-footer__tagline { left: 1040.1px; top: 11px; font-family: var(--vs-display); font-weight: 300; font-size: 24px; line-height: 31px; letter-spacing: 0; color: #000; } .site-top { left: 1436.5px; top: 367.5px; width: 31.5px; height: 31.5px; border-radius: 50%; background: var(--vs-green); display: flex; align-items: center; justify-content: center; transition: background-color 0.28s ease, transform 0.28s var(--vs-ease); } .site-top:hover { background: #35452f; transform: translateY(-3px); } .site-top img { width: 19px; height: 15px; } /* Por debajo de 1498px la cabecera y el pie encogen en proporción: el mismo recurso que usa la home, dividiendo longitudes con tan(atan2()). */ @media (max-width: 1497px) { html, body { overflow-x: hidden; } .site-header, .site-footer { --s: 0.86; --s: tan(atan2(100vw, 1498px)); transform: scale(var(--s)); } .site-header { margin-bottom: calc(-96px * (1 - var(--s))); } .site-footer { margin-bottom: calc(-399px * (1 - var(--s))); } } /* ================================================= MOVIMIENTO COMPARTIDO === Mismo revelado que la home. La clase la pone el JS: sin JS nada se oculta. ========================================================================== */ .vs-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--vs-ease), transform 0.8s var(--vs-ease); transition-delay: var(--d, 0s); will-change: opacity, transform; } .vs-reveal.is-in { opacity: 1; transform: none; } .vs-reveal.is-done { will-change: auto; } @keyframes vs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } } .vs-float { animation: vs-float 7s ease-in-out infinite; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .vs-reveal { opacity: 1; transform: none; transition: none; } .vs-float { animation: none; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }