/* * base.css — Reset y elementos. * * Sin clases de componente. Solo selectores de elemento y utilidades globales. * Todos los valores salen de tokens.css. */ /* ------------------------------------------------------------------------- * Reset * ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { /* clip y no hidden: hidden en html rompe position: sticky */ overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* * Negro, aunque el cuerpo de la página sea blanco. * * Esto no se ve nunca en el flujo normal: el lo tapa entero. Se ve * cuando el dedo estira la página más allá del final —el rebote elástico de * iOS— y ahí asomaba blanco, arriba contra la cabecera negra y abajo contra * el pie negro. Con el fondo del documento en negro, el estirón revela el * mismo color que la franja que lo acompaña. */ background-color: var(--color-fondo-inverso); } body { margin: 0; background-color: var(--color-fondo); color: var(--color-texto); font-family: var(--fuente-texto); font-size: var(--txt-base); line-height: var(--alto-linea-base); font-weight: var(--peso-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } /* ------------------------------------------------------------------------- * Tipografía * * El reparto no admite zona gris: Bodoni SOLO por encima de 28px, Inter SOLO * por debajo de 24px. * * Bodoni es un Didone de trazo finísimo: por debajo de 28px las astas se van a * gris sucio en cualquier Android de gama media. Inter es la tipografía de todos * los paneles del planeta: si se filtra a los titulares, la tienda deja de oler * a moda y empieza a oler a software. * ---------------------------------------------------------------------- */ /* * Sobre el trazo fino de los titulares. * * Bodoni es una Didone: el contraste marcado entre el asta gruesa y la fina es * lo que la hace, no un defecto. Pero el peso 400 llevaba esas finas al límite * de lo que una pantalla puede dibujar, y por debajo de 40px se iban a gris * sucio en cualquier pantalla que no sea retina. * * El peso 500 las engrosa lo justo para que se sostengan sin perder el * contraste. El 400 se reserva para el h1 en escritorio, donde ya pasa de 44px * y el trazo fino tiene píxeles suficientes para dibujarse limpio. * * El eje de optical size ayuda en la misma dirección —el navegador engorda el * dibujo cuando el titular es chico— pero no alcanza solo: corrige la forma, * no el peso. */ h1, h2 { font-family: var(--fuente-display); font-weight: var(--peso-medio); line-height: var(--alto-linea-titulo); letter-spacing: var(--track-display); color: var(--color-texto); font-optical-sizing: auto; overflow-wrap: break-word; text-wrap: balance; } h1 { font-size: var(--txt-2xl); } h2 { font-size: var(--txt-xl); } @media (min-width: 64em) { /* Recién acá el h1 pasa de 44px y aguanta el trazo original */ h1 { font-weight: var(--peso-normal); } } /* De h3 para abajo ya estamos por debajo del piso de Bodoni: pasa a Inter */ h3, h4, h5, h6 { margin: 0; font-family: var(--fuente-texto); font-weight: var(--peso-medio); line-height: var(--alto-linea-ajustado); color: var(--color-texto); } h3 { font-size: var(--txt-lg); } h4, h5, h6 { font-size: var(--txt-base); } p { text-wrap: pretty; max-width: var(--ancho-texto); } small { font-size: var(--txt-sm); } strong, b { font-weight: var(--peso-fuerte); } /* ------------------------------------------------------------------------- * Enlaces * ---------------------------------------------------------------------- */ a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.25em; transition: color var(--transicion); } a:hover { color: var(--color-enlace); } /* ------------------------------------------------------------------------- * Foco * * Nunca outline: none sin reemplazo. :focus-visible lo muestra solo cuando la * navegación es por teclado. * ---------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--color-foco); outline-offset: 2px; } /* Sobre superficies negras el negro no se ve: ahí el foco es rosa, que da 10.14:1 contra el negro. Al revés no funciona. */ .es-inverso :focus-visible, .pie :focus-visible, .banner-hero--inverso :focus-visible { outline-color: var(--color-foco-inverso); } /* ------------------------------------------------------------------------- * Superficie inversa * * La clase existía solo para el foco de acá arriba: declaraba dónde vive el * fondo negro sin ponerlo nunca. Cada superficie oscura del tema —el pie, la * caja de la franja, la figura de mi cuenta— repetía este mismo par a mano, y * ahora se suman la cabecera, el menú móvil y la banda de la tienda. Seis * copias del mismo par es lo que después se desincroniza. * * Solo el par. NO cuelga reglas descendentes de enlaces, bordes ni botones: una * cascada así pelearía con cada componente que caiga adentro, y el precio de * ganar esas peleas es !important. Cada pieza declara lo suyo. * ---------------------------------------------------------------------- */ .es-inverso { background-color: var(--color-fondo-inverso); color: var(--color-texto-inverso); } /* ------------------------------------------------------------------------- * Medios * ---------------------------------------------------------------------- */ img, picture, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; object-fit: cover; } svg { flex-shrink: 0; } /* ------------------------------------------------------------------------- * Formularios * ---------------------------------------------------------------------- */ input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], textarea, select { width: 100%; min-height: var(--boton-alto); padding: var(--esp-2xs) var(--esp-xs); background-color: var(--color-fondo); /* --color-borde y no --color-borde-sutil: un control necesita 3:1 contra el fondo, y el sutil da 1.30:1. */ border: 1px solid var(--color-borde); border-radius: var(--radio-nulo); /* 16px exactos: por debajo iOS hace zoom al enfocar el campo */ font-size: var(--txt-base); } input:focus, textarea:focus, select:focus { border-color: var(--color-borde-fuerte); } ::placeholder { color: var(--color-texto-tenue); opacity: 1; } /* ------------------------------------------------------------------------- * Tablas * ---------------------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; } .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------------------------- * Utilidades * ---------------------------------------------------------------------- */ .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Rosa con texto negro y no negro con texto blanco: la placa aterriza encima de la cabecera, que ahora es negra, y una placa negra sobre una barra negra no es una placa. El rosa se ve contra las dos superficies. */ .salto-contenido { position: absolute; top: 0; left: 0; z-index: 100; padding: var(--esp-2xs) var(--esp-sm); background-color: var(--color-accion-inversa); color: var(--color-accion-inversa-texto); font-weight: var(--peso-medio); transform: translateY(-120%); } .salto-contenido:focus { transform: translateY(0); color: var(--color-accion-inversa-texto); } [hidden] { display: none !important; } /* Etiqueta en versalitas con tracking amplio: el recurso que viene del "MADE TO STAND OUT" del logotipo. Se usa en títulos de sección y botones. */ .etiqueta { font-family: var(--fuente-texto); font-size: var(--txt-xs); font-weight: var(--peso-medio); letter-spacing: var(--track-etiqueta); text-transform: uppercase; line-height: var(--alto-linea-ajustado); } /* Filete corto: el guión bajo el logotipo, convertido en separador */ .filete { width: 2.5rem; height: 1px; border: 0; margin: 0; background-color: currentColor; opacity: 0.6; } /* Marcador de imagen pendiente. Con el arte cargado ya casi no aparece, pero sigue siendo la red por si falta un archivo. */ .marcador { display: grid; place-items: center; aspect-ratio: var(--marcador-ratio, 1); background-color: var(--color-fondo-alt); border: 1px dashed var(--color-borde-sutil); color: var(--color-texto-tenue); font-size: var(--txt-sm); text-align: center; } .marcador__texto { display: grid; gap: var(--esp-3xs); padding: var(--esp-2xs); } /* ------------------------------------------------------------------------- * Revelado al scroll * * El estado invisible NO está acá por defecto: se lo pone el JS a cada * elemento al arrancar, y lo saca cuando la sección entra en pantalla. El * orden es deliberado. Si main.js no llega, o el navegador no tiene * IntersectionObserver, nadie agrega la clase y todo se ve desde el primer * pintado. Al revés —ocultar por CSS y confiar en que el JS destape— un * archivo que no carga deja media home en blanco. * * Solo se marcan secciones que nacen abajo del pliegue, así que el instante * en que el JS las oculta ocurre fuera de la pantalla: no hay parpadeo. * * Se revela la SECCIÓN entera, nunca el párrafo suelto. Animar cada texto por * separado retrasa la lectura y es exactamente lo que hace que una página se * note "animada" en vez de sentirse fluida. * ---------------------------------------------------------------------- */ [data-revelar] { transition: opacity var(--transicion-revelar), transform var(--transicion-revelar); } [data-revelar].esta-por-revelar { opacity: 0; transform: translateY(var(--revelar-desplazamiento)); } /* ------------------------------------------------------------------------- * Movimiento reducido — una sola regla apaga todo el sitio * ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }