@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); :root { --bg-color: #0d0e11; -webkit-font-smoothing: antialiased; } body { height: 100%; margin: 0; padding: 0; box-sizing: border-box; font-family: "Inter", serif; font-optical-sizing: auto; background-color: var(--bg-color); color: #fff; } .wrapper { flex: none; height: auto; position: relative; max-width: 500px; word-break: break-word; word-wrap: break-word; } .wrapper p { font-size: 20px; line-height: 1.2em; font-weight: 300; padding: 0; margin: 0; text-align: center; } .wrapper p.--black { color: #0d0e11; } h1, h2, h3 { font-size: 67px; font-weight: 300; font-style: normal; margin: 0; padding: 0; max-width: 900px; text-align: center; } h1.--black, h2.--black, h3.--black { color: #0d0e11; font-size: 50px; } small.--black { background-color: rgba(0, 0, 0, 0.3); padding: 5px; border-radius: 6px; } small { background-color: rgba(255, 255, 255, 0.3); padding: 5px; border-radius: 6px; text-align: center; } .flex { display: flex; align-items: center; gap: 20px; padding: 10px; } .flex.flex--wrap { flex-wrap: wrap; justify-content: center; } .flex.flex--form { width: 600px; border-color: #dfdfdf; border: 1px solid; padding: 60px; border-radius: 12px; } .flex.flex--bg { background-color: hsl(225, 13%, 6%); background-image: radial-gradient( ellipse farthest-side at center top, hsl(0, 0%, 26%) 0%, hsl(225, 13%, 6%) 80% ); background-size: contain; } .flex.flex--column { flex-direction: column; } .flex.flex--gray { background-color: #f6f7fa; border-radius: 30px; padding: 100px; } input, textarea { -webkit-appearance: none; width: 100%; line-height: 1.4em; outline: none; border: none; padding: 12px; border-radius: 13px; font-family: "Inter Regular", "Inter", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 400; font-size: 14px; background: rgba(235, 235, 235, 0.05); color: rgb(255, 255, 255); box-shadow: inset 0 0 0 1px transparent; box-sizing: border-box; } textarea { resize: none; } button { appearance: none; width: 160px; line-height: 1.4em; outline: none; border: none; cursor: pointer; border-radius: 13px; padding: 12px; font-family: "Inter Regular", Inter, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 600; font-size: 14px; background: rgb(207, 242, 69); color: rgb(13, 14, 17); } nav { align-items: center; display: flex; flex-wrap: nowrap; height: 80px; overflow: visible; justify-content: center; gap: 20px; } nav a { display: block; text-decoration: none; } .card { background-color: #fff; border-radius: 12px; height: 400px; position: relative; width: 500px; } .card .wrap { padding: 40px; } .card h1, .flex.flex--form h3, .card h2, .card h3 { color: #1f2022; font-size: 25px; } .flex.flex--form h3 { color: #fff; } .card p { color: rgb(116, 119, 129); } img:not(.logo) { width: 100%; height: 200px; position: absolute; object-fit: cover; bottom: 0; opacity: 0.9; border-radius: 0 0 12px 12px; } /* Responsivo para teléfonos */ @media (max-width: 768px) { .wrapper { max-width: 100%; padding: 20px; } h1, h2, h3 { font-size: 40px; } .card { width: 100%; margin-bottom: 20px; } .flex { align-items: center; flex-wrap: wrap; } .flex.flex--bg { background-size: cover; padding: 30px 15px; } input { font-size: 16px; } button { width: 100%; font-size: 16px; } small { font-size: 12px; } .card h1, .card h2, .card h3 { font-size: 22px; } .flex--form { width: 320px !important; } } /* Responsivo para pantallas pequeñas */ @media (max-width: 480px) { h1, h2, h3 { font-size: 30px; } .wrapper p { font-size: 16px; } .flex.flex--gray { padding: 50px; } .card .wrap { padding: 20px; } button { width: 100%; font-size: 16px; padding: 15px; } .flex.flex--column { padding: 15px; } .logo { width: 40px; } }