/* ========================================================================= URRETA — Base: reset, tokens y contenedor Todos los valores en rem. 1rem = 16px @ 1980px (ancho del artboard). ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@200;300;400;500;600;700&family=Spectral:wght@200;300;400&display=swap'); /* ---------- Tokens ---------- */ :root { /* Paleta (variables de Figma) */ --c-primary: #DB4D87; /* Primary/Primary 01 */ --c-cream: #FFFAF3; /* Primary/Primary 02 */ --c-white: #FFFFFF; --c-border-pink: #F1578E; /* Gradiente de marca (CALL TO ACTION) */ --grad-cta: linear-gradient( 50.63deg, rgb(225, 73, 110) 21.560%, rgb(252, 104, 156) 40.442%, rgb(200, 54, 150) 61.297%, rgb(200, 54, 150) 76.581%, rgb(239, 62, 177) 93.953% ); /* Sombra del botón principal */ --shadow-cta: 0 0.25rem 0.175rem rgba(109, 20, 86, 0.22); /* Tipografía */ --font-display: 'Stack Sans Headline', 'Helvetica Neue', Arial, sans-serif; /* Medidas del artboard */ --design-width: 123.75rem; /* 1980px */ /* Grosor de las líneas de un pelo —divisores, subrayados de campo—. No pueden ir en rem sueltos: a 0.125rem el navegador tiene que pintar 1,4 px en una pantalla mediana, y redondea según dónde caiga cada línea. Resultado: una sale de 2 px, la de al lado de 1, y por debajo de 800 px alguna se queda en 0 y desaparece. Redondeadas a píxel entero, todas miden lo mismo caiga donde caiga, y nunca bajan de 1. */ --linea-1: 1px; /* 1px del artboard */ --linea-2: 2px; /* 2px del artboard */ /* Movimiento — una sola escala de tiempos y curvas para todo el sitio */ --t-corto: 180ms; --t-medio: 320ms; --t-largo: 620ms; --e-suave: cubic-bezier(0.22, 0.61, 0.36, 1); --e-entrada: cubic-bezier(0.16, 1, 0.3, 1); } /* Donde haya round() —Chrome 125, Safari 15.4, Firefox 118— las líneas vuelven a escalar con el diseño, pero saltando de píxel en píxel. */ @supports (height: round(1px, 1px)) { :root { --linea-1: max(1px, round(0.0625rem, 1px)); --linea-2: max(1px, round(0.125rem, 1px)); } } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { /* font-size lo controla js/scale.js — este valor es el fallback sin JS */ font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-display); font-weight: 300; color: var(--c-primary); background: var(--c-cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* Figma aplica word-break:break-word a todos los textos del diseño: los titulares grandes parten dentro de la palabra cuando no caben. */ overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; border: 0; background: none; } /* El UA de Chrome/Safari da a