/* Matteria — base: tipografías, reset y utilidades compartidas */ @font-face { font-family: 'Monument Grotesk'; src: url('../fonts/MonumentGrotesk-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; /* Monument declara unas verticales muy abiertas (ascent 219%, descent 59%). Sin estos overrides la linea base cae muy abajo dentro de su caja. */ ascent-override: 101%; descent-override: 29%; line-gap-override: 0%; } @font-face { font-family: 'Monument Grotesk'; src: url('../fonts/MonumentGrotesk-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; /* Monument declara unas verticales muy abiertas (ascent 219%, descent 59%). Sin estos overrides la linea base cae muy abajo dentro de su caja. */ ascent-override: 101%; descent-override: 29%; line-gap-override: 0%; } @font-face { font-family: 'Monument Grotesk Mono'; src: url('../fonts/MonumentGrotesk-Mono.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; /* Monument declara unas verticales muy abiertas (ascent 219%, descent 59%). Sin estos overrides la linea base cae muy abajo dentro de su caja. */ ascent-override: 101%; descent-override: 29%; line-gap-override: 0%; } @font-face { font-family: 'Reckless Neue'; src: local('Reckless Neue Regular'), local('Reckless-Neue-Regular'), url('../fonts/RecklessNeue-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Reckless Neue'; src: url('../fonts/RecklessNeue-RegularItalic.woff2') format('woff2'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Reckless Neue'; src: url('../fonts/RecklessNeue-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } /* Fondo oscuro en toda la web: la UI nativa (barra de scroll, controles nativos, autofill) se pinta en oscuro */ :root { color-scheme: dark; } :root { --radius: 4px; /* Tinta del CTA de compra y del submit del modal: sobre la superficie de --accent. Una ficha con acento claro la reapunta en su colorN.css */ --cta-ink: var(--cream); /* Tinta del boton secundario: el "Recibir" del boletin, sobre velo, no sobre el acento. Una ficha lo reapunta en su colorN.css si su papel lo pide */ --cta-ink2: var(--dark); /* Radio grande: imagenes de apertura y superficies amplias */ --radius-big: 8px; /* Elevacion: la sombra que comparten las superficies que se levantan del papel (folds3, buscador, compartir). Sobre fondo oscuro una sombra negra no se ve, asi que por defecto no hay ninguna: la declaran las paletas claras. */ --lift: none; --serif: 'Reckless Neue', Georgia, serif; --serif-feat: "ss04", "ss06", "ss07", "ss10", "ss14"; --sans: 'Monument Grotesk', system-ui, -apple-system, sans-serif; --mono: 'Monument Grotesk Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Retícula: 8 col x 56px + 7 canales x 96px = 1120px */ --grid-columns: 8; --grid-column-width: 56px; --grid-gutter: 96px; --grid-width: 1120px; --grid-margin-min: 80px; --spacing-unit: 8px; --gutter: var(--grid-gutter); --edge: 0px; --ease: cubic-bezier(0.16, 1, 0.3, 1); /* Aire vertical de una seccion: comun a todas las paginas */ --section-pad: var(--space-24); /* Sangrado desde dentro de .wrap hasta el borde de la ventana */ --bleed-pad: max(24px, calc((100vw - var(--grid-width)) / 2)); } /* Por debajo de 1241px la retícula se adapta al ancho disponible */ /* 961–1240px: siguen las 8 columnas, ya fluidas */ @media (max-width: 1240px) { :root { --grid-gutter: 48px; --edge: 48px; --bleed-pad: var(--edge); }} /* Tableta: 4 columnas */ @media (max-width: 960px) { :root { --grid-columns: 4; --grid-gutter: 40px; --edge: 40px; }} /* Móvil: 2 columnas */ @media (max-width: 767px) { :root { --grid-columns: 2; --grid-gutter: 32px; --edge: 32px; }} @media (max-width: 479px) { :root { --grid-columns: 1; --grid-gutter: 24px; --edge: 24px; }} /* ---- Escalas universales: tipografia, espaciado y velos ---- Compartidas por toda la web. Una hoja de pagina solo declara su paleta (--bg-body, --ink, --ink-light, --accent) y sus excepciones. */ :root { /* Cuerpo de texto: la escala crece en peldanos de tamano + interlineado */ /* Fijos: las versalitas mono piden cifras exactas (a 13.4px la mono engorda el trazo y desalinea las filas de 48) */ --label: 0.75rem; /* 12px */ --text-xs: 0.875rem; --leading-xs: 1rem; /* 14 / 16 */ /* Fluidos de recorrido corto: suelo a 320px, techo a 768px */ --text-sm: clamp(0.875rem, 0.7857rem + 0.4464vw, 1rem); /* 14 → 16 */ --leading-sm: clamp(1.25rem, 1.0714rem + 0.8929vw, 1.5rem); /* 20 → 24 */ --text-md: clamp(1rem, 0.9107rem + 0.4464vw, 1.125rem); /* 16 → 18 */ --leading-md: 1.5rem; /* 24 */ --text-body: clamp(1.1875rem, 1.1429rem + 0.2232vw, 1.25rem); /* 19 → 20 */ --leading-body: clamp(1.875rem, 1.7857rem + 0.4464vw, 2rem); /* 30 → 32 */ --text-lg: clamp(1.125rem, 1.0357rem + 0.4464vw, 1.25rem); /* 18 → 20 */ --leading-lg: clamp(1.5rem, 1.3214rem + 0.8929vw, 1.75rem); /* 24 → 28 */ --text-xl: clamp(1.25rem, 1.0714rem + 0.8929vw, 1.5rem); /* 20 → 24 */ --leading-xl: clamp(1.75rem, 1.5714rem + 0.8929vw, 2rem); /* 28 → 32 */ /* Titulares: tamano e interlinea interpolan a la vez, con el mismo vw, para que la proporcion se mantenga entre 1.15 y 1.25 en cualquier ancho. Los topes (32/40, 40/48, 56/64, 64/72, 140/140) son los de la escala. */ --text-h4: clamp(1.5rem, 1rem + 1.6vw, 2rem); --leading-h4: clamp(2rem, 1.4rem + 1.9vw, 2.5rem); --text-h3: clamp(1.75rem, 1.1rem + 2.2vw, 2.5rem); --leading-h3: clamp(2rem, 1.25rem + 2.5vw, 3rem); --text-h2: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); --leading-h2: clamp(2.5rem, 1.5rem + 4vw, 4rem); --text-h1: clamp(2.5rem, 1.5rem + 4vw, 4rem); --leading-h1: clamp(3rem, 1.9rem + 4.4vw, 4.375rem); /* Medio escalon de interlinea: los 4px que faltan entre los peldanos de 8. Valen para ajuste optico de un bloque de texto —un cuerpo que abre demasiado con 32 y se cierra con 24—, nunca para el ritmo entre bloques, que sigue siendo de 8. Fijos: son ajustes, no escala fluida. */ --leading-20: 1.25rem; /* 20 */ --leading-24: 1.5rem; /* 24 */ --leading-28: 1.75rem; /* 28 */ --leading-32: 2rem; /* 32 */ --leading-36: 2.25rem; /* 36 */ --leading-40: 2.5rem; /* 40 */ --leading-44: 2.75rem; /* 44 */ --leading-52: 3.25rem; /* 52 */ --leading-60: 3.75rem; /* 60 */ --leading-68: 4.25rem; /* 68 */ /* Espaciado: unidad de 4px, ritmo vertical de 8 */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-9: 2.25rem; /* 36: medio escalon, ajuste optico */ --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-18: 4.5rem; --space-20: 5rem; --space-24: 6rem; --space-28: 7rem; --space-32: 8rem; --space-60: 15rem; /* Velos: neutros, sobreviven a cualquier cambio de paleta */ --veil-white-90: rgb(255 255 255 / 0.9); --veil-white-70: rgb(255 255 255 / 0.7); --veil-white-50: rgb(255 255 255 / 0.5); --veil-white-30: rgb(255 255 255 / 0.3); --veil-white-20: rgb(255 255 255 / 0.2); --veil-white-10: rgb(255 255 255 / 0.1); --veil-white-4: rgb(255 255 255 / 0.04); --veil-white-2: rgb(255 255 255 / 0.02); --veil-dark-90: rgb(17 17 17 / 0.9); --veil-dark-70: rgb(17 17 17 / 0.7); --veil-dark-50: rgb(17 17 17 / 0.5); --veil-dark-30: rgb(17 17 17 / 0.3); --veil-dark-20: rgb(17 17 17 / 0.2); --veil-dark-10: rgb(17 17 17 / 0.1); --veil-dark-4: rgb(17 17 17 / 0.04); --veil-dark-2: rgb(17 17 17 / 0.02); /* Escala semantica: es la que usan las bases. Apunta a la escala que corresponde al fondo de la pagina. Por defecto, fondo oscuro; una ficha de fondo claro redeclara estos siete tokens en su colorN.css apuntando a --veil-dark-*. Ningun componente vuelve a preguntar si la pagina es clara. */ --veil-90: var(--veil-white-90); --veil-70: var(--veil-white-70); --veil-50: var(--veil-white-50); --veil-30: var(--veil-white-30); --veil-20: var(--veil-white-20); --veil-10: var(--veil-white-10); --veil-4: var(--veil-white-4); --veil-2: var(--veil-white-2); /* Derivado de la tinta de cada pagina */ --line: rgb(from var(--ink) r g b / 0.6); interpolate-size: allow-keywords; } /* Toda la escala es fluida, sin un solo @media: el cuerpo va de 18/28 a 320px hasta 20/32 a partir de 768, y de ahi no crece. Los titulares siguen su propio recorrido, mas largo, hasta 1440. Solo --label y --text-xs quedan fijos. */ *, *::before, *::after { box-sizing: border-box; } html { /* Reserva el canal de la barra vertical desde el primer pintado: sin esto, 100vw (bleed, --track) mide más que el área útil en cuanto aparece la barra y asoma un scroll horizontal intermitente durante la carga. */ scrollbar-gutter: stable; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; text-rendering: optimizeLegibility; } body { margin: 0; /* La retícula puede desbordar unos pixeles al calcular columnas con vw: el recorte evita el desplazamiento horizontal. Va en body y no en .page para cubrir tambien el dock y el modal. */ overflow-x: clip; font-family: var(--sans); font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; display: block; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } /* Botones y campos van en sans en toda la web: la serif es para leer, no para escribir. Ninguna pieza vuelve a declarar la familia; el que necesite versalita solo anade su letter-spacing y su text-transform. */ button, input, textarea, select, output { font: inherit; color: inherit; font-family: var(--sans); font-feature-settings: normal; letter-spacing: normal; } /* Un solo estilo tipografico para todo boton de la web: versalita sans, un peldano por debajo del cuerpo. Ningun boton lo vuelve a declarar; el que se aparta (el nombre del libro en el dock) lo anula en su propia regla. */ button { background: none; border: none; padding: 0; cursor: pointer; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; } .wrap { width: 100%; max-width: min(var(--grid-width), 100%); margin-inline: auto; padding-inline: var(--edge); } /* Entradilla editorial: sirve en fichas, post, about o legales */ .intro { margin: 0; font-weight: 400; font-size: var(--text-xl); line-height: var(--leading-xl); letter-spacing: -0.01em; text-wrap: pretty; } @media (max-width: 767px) { .intro { font-size: var(--text-xl); line-height: var(--leading-xl); }} /* Cita dentro del cuerpo: mismo peldano que la entradilla, sangrada un escalon por los dos lados y con comillas espanolas en los pseudoelementos. */ :is(.entry-description, .author-description) blockquote { margin: var(--space-12) 0; padding-inline: var(--space-8); font-family: var(--serif); font-feature-settings: var(--serif-feat); font-weight: 400; font-size: var(--text-xl); line-height: var(--leading-xl); letter-spacing: -0.01em; text-wrap: pretty; } :is(.entry-description, .author-description) blockquote p { margin: 0; font: inherit; } :is(.entry-description, .author-description) blockquote p + p { margin-top: var(--space-6); } /* Las comillas van en el texto, no en la caja: en el primer y ultimo parrafo, asi abren y cierran en linea con la cita y no como bloques aparte. */ :is(.entry-description, .author-description) blockquote p:first-of-type::before, :is(.entry-description, .author-description) blockquote p:last-of-type::after { /* Mando propio: un bloque con tinta de color (la banda del autor) lo apunta a currentColor y las comillas siguen al texto */ color: var(--quote-mark, var(--ink-light)); /* Las comillas suben dos peldanos sobre el cuerpo de la cita; el leading se queda en el del parrafo para no abrir la linea */ font-size: var(--text-h3); line-height: 0; vertical-align: -0.08em; } :is(.entry-description, .author-description) blockquote p:first-of-type::before { content: "\00AB\2009"; } :is(.entry-description, .author-description) blockquote p:last-of-type::after { content: "\2009\00BB"; } @media (max-width: 767px) { :is(.entry-description, .author-description) blockquote { padding-inline: var(--space-4); font-size: var(--text-lg); line-height: var(--leading-xl); }} .visually-hidden { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---- Grid de maquetación (debug) ---- */ /* Los botones se apilan dentro de .grid-tools, no se fijan por separado */ .grid-tools { position: fixed; bottom: 16px; left: 16px; /* Por debajo del dock de compra (z-index 120): la ayuda de maquetacion nunca tapa el CTA. Las retículas siguen por encima de todo. */ z-index: 110; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); } .grid-toggle { width: 108px; padding: var(--space-2) var(--space-3); font-size: var(--label); line-height: var(--leading-xs); font-weight: 600; text-transform: uppercase; text-align: center; color: var(--white); background: var(--dark); border: 0; border-radius: var(--radius); cursor: pointer; } .grid-toggle[aria-pressed="true"] { color: var(--dark); background: var(--white); } /* Con el dock en pantalla, los mandos suben para no quedar debajo */ @media (max-width: 960px) { .grid-tools { bottom: calc(72px + var(--space-4) + env(safe-area-inset-bottom)); }} /* El overlay refleja el contenedor real: mismo tope, mismo --edge, centrado */ .grid-overlay { position: fixed; inset: 0; z-index: 9998; pointer-events: none; width: 100%; max-width: min(var(--grid-width), 100%); margin-inline: auto; padding-inline: var(--edge); display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); box-sizing: border-box; } .grid-overlay[hidden] { display: none; } /* Cada columna de la reticula de depuracion, pintada por ficha.js */ .grid-col { background: var(--veil-4); } /* ---- Revelados al hacer scroll ---- */ @keyframes fgRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; }} @keyframes fgDrop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; }} @media (prefers-reduced-motion: no-preference) { [data-reveal] { opacity: 0; } [data-reveal][data-shown] { animation: fgRise 1.05s var(--ease) both; animation-delay: var(--rd, 0ms); } [data-load] { opacity: 0; } [data-load][data-shown] { animation: fgDrop 1.05s var(--ease) both; animation-delay: var(--rd, 0ms); }} /* ---- Iconos por mascara: un bloque vacio que se tinta con currentColor ---- La superficie es comun a todos; cada icono solo declara su caja y su fichero. Un icono nuevo entra en esta lista, no se copia el bloque. */ .icon-mail, .icon-letter, .icon-up, .icon-star, .icon-close { display: block; flex: 0 0 auto; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .icon-mail { width: 20px; height: 20px; --mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.3%22%3E%3Crect x=%221.75%22 y=%224.25%22 width=%2216.5%22 height=%2211.5%22%3E%3C/rect%3E%3Cpath d=%22M2 5l8 6 8-6%22%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: var(--mask); mask-image: var(--mask); } .icon-letter { width: 24px; height: 24px; --mask: url("data:image/svg+xml,%3Csvg width=%2287%22 height=%2288%22 viewBox=%220 0 87 88%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M11.469 86.9962C16.683 83.7542 23.045 82.9142 28.912 84.7012C36.153 87.6472 44.248 87.7152 51.516 84.8612C52.036 84.6482 52.289 84.0602 52.089 83.5682C51.89 83.0472 51.303 82.7802 50.782 82.9942C43.967 85.6612 36.366 85.6072 29.591 82.8062C23.137 80.8202 16.149 81.7402 10.414 85.3002C9.93397 85.5812 9.80097 86.1952 10.094 86.6872C10.376 87.1552 11.002 87.3002 11.469 86.9962Z%22 fill=%22black%22%3E%3C/path%3E%3Cpath d=%22M86.218 0C74.028 0.936 62.212 4.629 51.677 10.817C51.304 14.031 51.21 17.271 51.411 20.499C50.024 18.137 48.97 15.591 48.276 12.924C31.913 23.633 20.017 39.955 14.789 58.799C8.788 66.962 3.827 75.829 0 85.205C17.11 56.84 40.115 32.488 67.453 13.804C50.957 29.061 35.341 45.238 20.697 62.294C39.901 58.693 57.224 48.438 69.627 33.341C64.826 32.902 59.985 33.06 55.224 33.808C60.638 31.327 66.494 29.941 72.441 29.7C74.163 27.353 75.762 24.899 77.229 22.392C73.429 22.739 69.655 23.419 65.972 24.446C69.961 22.045 74.322 20.352 78.883 19.419C82.123 13.285 84.591 6.749 86.218 0Z%22 fill=%22black%22%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: var(--mask); mask-image: var(--mask); } .icon-up { width: 24px; height: 24px; --mask: url("data:image/svg+xml,%3Csvg width=%22115%22 height=%2258%22 viewBox=%220 0 115 58%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M0 53.619C0 54.643 0.391 55.666 1.172 56.448C2.734 58.01 5.267 58.01 6.828 56.448L53.888 9.387C54.782 8.493 55.973 8 57.237 8C58.503 8 59.692 8.492 60.586 9.387L107.647 56.448C109.209 58.01 111.742 58.01 113.304 56.448C114.866 54.886 114.866 52.353 113.304 50.791L66.243 3.73C63.838 1.325 60.64 0 57.237 0C53.836 0 50.636 1.325 48.231 3.73L1.172 50.791C0.391 51.572 0 52.596 0 53.619Z%22 fill=%22currentColor%22%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: var(--mask); mask-image: var(--mask); } .icon-star { width: 16px; height: 16px; --mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2236%22 height=%2236%22 viewBox=%220 0 36 36%22 fill=%22none%22%3E%3Cpath d=%22M4.43479 12.7286C4.15483 11.9474 4.21084 11.2514 4.60201 10.637C4.88045 10.1346 5.46637 9.82866 6.35923 9.71628C7.1956 9.66073 7.97641 9.82866 8.70205 10.2187C11.4349 11.7243 13.9458 14.0671 16.2336 17.2468C12.0498 16.8576 8.61745 15.9375 5.94085 14.486C5.21512 14.0963 4.71319 13.5107 4.43476 12.7287L4.43479 12.7286ZM6.61039 26.5361C5.77321 26.4812 5.18761 26.1733 4.85281 25.616C4.5732 25.1132 4.60203 24.5004 4.93683 23.7741C5.32647 22.9941 5.88489 22.4085 6.61038 22.0173C9.84528 20.2326 13.0259 19.2562 16.1507 19.0889C14.0291 22.2137 11.7155 24.4721 9.20448 25.8665C8.31138 26.3688 7.44702 26.5916 6.61017 26.536L6.61039 26.5361ZM15.7319 3.94158C16.3447 3.21714 17.0419 2.85315 17.8243 2.85315C18.4927 2.85315 19.1338 3.24432 19.7483 4.02513C20.3063 4.80678 20.5854 5.64348 20.5854 6.53553C20.5854 9.21351 19.6642 12.4494 17.8243 16.2432C15.8706 12.2268 14.8947 8.99133 14.8947 6.53553C14.8951 5.53194 15.173 4.66722 15.7319 3.94158ZM19.3304 32.2268C18.8275 32.8412 18.242 33.1463 17.572 33.1463C16.9584 33.1463 16.4012 32.8119 15.8991 32.1436C15.3976 31.5292 15.1451 30.8328 15.1451 30.0512C15.1451 27.094 16.0367 23.774 17.8244 20.0921C19.3301 23.162 20.0828 26.4818 20.0828 30.0512C20.0832 30.8884 19.8328 31.6135 19.3304 32.2268ZM29.7065 9.88308C30.5437 9.99546 31.1577 10.3571 31.5484 10.9715C31.826 11.4727 31.7989 12.1151 31.4644 12.8955C31.0732 13.6775 30.5148 14.2631 29.79 14.6536C27.5024 15.9371 24.0714 16.7736 19.4976 17.1636C21.5617 14.3184 24.0999 12.0588 27.1137 10.3848C27.9505 9.93867 28.8145 9.77274 29.7065 9.88311L29.7065 9.88308ZM31.2141 23.6906C31.6033 24.4162 31.6318 25.0293 31.2973 25.5322C30.9617 26.0346 30.3769 26.3418 29.5397 26.4529C28.6465 26.5645 27.8369 26.4261 27.1137 26.0346C24.3786 24.5278 21.8412 22.1571 19.4976 18.921C23.0124 19.2561 26.3037 20.2605 29.3721 21.9342C30.2088 22.3802 30.8233 22.9659 31.2141 23.6906H31.2141Z%22 fill=%22%23000%22%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: var(--mask); mask-image: var(--mask); } /* Aspa unica de la casa: la del cierre de .legacy, dibujada a pincel. Es un fichero, no un data-uri, porque los tres cierres la comparten y asi se descarga una vez. */ .icon-close { width: 26px; height: 26px; aspect-ratio: 59 / 56; --mask: url("../../img/x-closing-legacy.svg"); -webkit-mask-image: var(--mask); mask-image: var(--mask); } /* Fondo y tinta del documento: los aplica la base, los valores los pone la paleta de cada pagina en --bg-body y --ink */ body { color: var(--ink); } /* El fondo de la pagina lo pinta el html, y el body lo repite: en el rebote del scroll algunos navegadores pintan el lienzo con color-scheme y sale negro */ html, body { background-color: var(--bg-body); } /* Sin rebote en ninguna pagina: la franja que abre no la pinta la hoja sino el navegador, asi que no hay forma de que respete la paleta */ html { overscroll-behavior-y: none; }/* ---- Titulares: escala universal h1-h6 ---- Serif, peso 400, tamano fluido e interlinea siempre multiplo de 8. Todo en :where() y con especificidad cero, para que cualquier clase de pagina o de layout (el h1 de cada ficha, por ejemplo) lo ajuste sin pelear. */ :where(.page, .club) :is(h1, h2, h3, h4, h5, h6) { margin: 0; font-family: var(--serif); font-feature-settings: var(--serif-feat); font-weight: 400; text-wrap: pretty; } :where(.page, .club) h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: -0.02em; font-weight: 500; } :where(.page, .club) h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: -0.01em; font-weight: 500; } :where(.page, .club) h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: -0.01em; font-weight: 500; } :where(.page, .club) h4 { font-size: var(--text-h4); line-height: var(--leading-h4); } :where(.page, .club) h5 { font-size: var(--text-xl); line-height: var(--leading-xl); } /* El ultimo nivel deja la serif y pasa a rotulo en versal */ :where(.page, .club) h6 { font-family: var(--sans); font-feature-settings: normal; font-size: var(--text-sm); line-height: var(--leading-sm); letter-spacing: 0.1em; text-transform: uppercase; } /* Un titular que sigue a cualquier contenido abre un salto de seccion: 64 arriba y 24 abajo. El hermano anterior se filtra con :not() sobre los seis titulares, asi que vale para parrafos, listas, citas, filetes, figuras, imagenes o video sin enumerarlos, y solo se excluye un titular tras otro, que forma bloque con el anterior. Con la especificidad de una clase para ganarle a los margenes que cada titular declara en su propia regla. */ :is(.entry-description, .author-description) :not(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4) { margin-top: var(--space-16); margin-bottom: var(--space-6); } /* Parrafo base. El peldano de lectura NO se declara aqui: lo pone el body (--text-body, 20/32) y el parrafo lo hereda. Asi un contenedor que quiera otro peldano lo cambia para todo su arbol y la herencia funciona; una regla sobre p, aunque vaya en :where(), le gana siempre a un valor heredado del padre y obligaba a repetir el tamano en cada pieza. */ :where(.page, .club) p { margin: 0; text-wrap: pretty; } /* Ritmo vertical entre titular y bloque de flujo. El par no es solo con el parrafo: cualquier pieza que abra o cierre un bloque de lectura entra en la misma lista (listas, figuras, imagenes sueltas, incrustados, tablas, codigo). Los dos peldanos altos abren un escalon mas por debajo: con 24px un h2 se quedaba pegado a lo que encabeza y no se leia como cabecera del bloque. */ :where(.page, .club) :is(h1, h2) + :is(p, ul, ol, dl, figure, blockquote, img, picture, iframe, video, table, pre) { margin-top: var(--space-8); } :where(.page, .club) :is(h3, h4, h5, h6) + :is(p, ul, ol, dl, figure, blockquote, img, picture, iframe, video, table, pre) { margin-top: var(--space-6); } :where(.page, .club) :is(p, ul, ol, dl, figure, blockquote, img, picture, iframe, video, table, pre) + :is(h2, h3) { margin-top: var(--space-18); } :where(.page, .club) :is(p, ul, ol, dl, figure, blockquote, img, picture, iframe, video, table, pre) + :is(h4, h5, h6) { margin-top: var(--space-12); } /* Bloque a bloque, sin titular en medio: un solo peldano de 24px, el mismo que separa dos parrafos. Fuera de la lista las imagenes sueltas (img, picture, video): cuando van en serie son un componente y su separacion la pone su propio `gap`, no este par. */ :where(.page, .club) :is(p, ul, ol, dl, figure, blockquote, table, pre) + :is(p, ul, ol, dl, figure, blockquote, table, pre) { margin-top: var(--space-6); } /* ---- Listas: un peldano por nivel de anidamiento ---- El reset deja ul y ol sin vinetas ni sangrado; esto solo pone la escala. */ /* La escala va en la lista, no en el li: asi una lista con clase propia la cambia de un solo sitio y sus li la heredan */ :where(.page, .club) :is(ul, ol) { font-size: var(--text-md); line-height: var(--leading-md); } :where(.page, .club) :is(ul, ol) li + li { margin-top: var(--space-2); } /* Vinetas solo en las listas de texto (sin clase): navegaciones e indices las siguen queriendo limpias */ :where(.page, .club) ul:not([class]) { list-style: square; padding-left: var(--space-6); } :where(.page, .club) ol:not([class]) { list-style: decimal; padding-left: var(--space-6); } /* Del segundo nivel hacia dentro: un peldano menos y media columna de sangrado */ :where(.page, .club) :is(ul, ol) :is(ul, ol) { margin-top: var(--space-2); padding-left: var(--space-6); font-size: var(--text-sm); line-height: var(--leading-sm); } /* ---- Retículas de depuracion: columnas y ritmo de 8 ---- Universal: cualquier pagina con los botones .grid-tools las tiene. */ .grid-overlay[hidden], .rhythm-overlay[hidden] { display: none; } .rhythm-overlay { position: fixed; inset: 0; z-index: 9300; pointer-events: none; background: repeating-linear-gradient(to bottom, rgb(from var(--accent) r g b / 0.16) 0 1px, transparent 1px 8px); } /* Linea marcada cada 64px: ocho escalones de la malla */ .rhythm-overlay::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgb(from var(--accent) r g b / 0.32) 0 1px, transparent 1px 64px); } /* Hover de fila igual que .author-works li: los extremos se separan */ .head-row :is(dt, dd) { transition: translate 0.24s var(--ease); } .head-row:hover dt { translate: 3px 0; } .head-row:hover dd { translate: -3px 0; } /* Cada fila entra con un pequeno retardo, en cascada. Con animacion y no transicion: al abrir por primera vez el panel no estaba renderizado. */ /* ---- Pie de pagina: un solo modulo para las dos formas del sitio, la cortina de ficha3 y el club de ficha1. Sale del contenedor para ocupar la ventana y el padding vuelve a alinear su contenido con las ocho columnas; lo que cambia entre fichas es la tarjeta de dentro, no el pie. ---- */ .club { position: relative; row-gap: 0; padding-inline: calc((100vw - min(var(--grid-width), 100vw)) / 2 + var(--edge)); padding-block: var(--space-16); align-content: center; } .club > * { grid-column: 1 / -1; } @media (min-width: 961px) { /* Llena la ventana; con la cortina, --foot-h reserva ese hueco al final del scroll */ .club { min-height: 100vh; }} /* ---- Barra inferior: marca, enlaces legales y vuelta arriba. Reticula de cinco columnas, no flex: asi el grupo del centro se centra de verdad y la flecha cae en la esquina derecha sin depender del reparto de los huecos. ---- */ .bottom-bar { --track: min(var(--grid-width), 100vw - 2 * var(--edge)); --bar-col: calc((var(--track) - 7 * var(--gutter)) / 8); background: var(--veil-4); border-top: 1px solid var(--veil-10); border-radius: 0 0 var(--radius) var(--radius); /* Se pega al bloque de arriba y solo deja aire por debajo */ margin-block: 0 var(--space-8); } .bottom-bar ul { display: grid; /* Todas las celdas miden lo mismo y llenan la fila: el reparto no depende del largo del rotulo, asi que anadir o quitar un enlace no descoloca la barra. */ grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; column-gap: 0; margin: 0; padding: 0; list-style: none; font-size: var(--text-md); line-height: var(--leading-md); } /* La regla general de listas mete 8px a cada li salvo el primero y desnivela la fila */ .bottom-bar li + li { margin-top: 0; border-left: 1px solid var(--veil-10); } .bottom-bar a { display: flex; justify-content: center; width: 100%; align-items: center; gap: var(--space-3); min-height: 40px; padding-block: var(--space-4); /* Rotulo en sans: tracking normal */ font-family: var(--sans); font-feature-settings: normal; letter-spacing: normal; font-size: var(--text-sm); line-height: var(--leading-sm); padding-inline: var(--space-5); border-radius: var(--radius); /* Velo de tinta, no la secundaria de la pagina: --ink-light es una tinta clara y solo se lee sobre papel oscuro */ color: var(--veil-90); text-decoration: none; transition: background-color 0.2s var(--ease); } .bottom-bar a:hover { background: var(--veil-2); } /* Aviso de copiado: aparece sobre la celda y se va solo */ .bottom-bar [data-copy] { position: relative; } .bottom-bar .copy-tip { position: absolute; /* Arriba a la derecha: abajo lo taparia el dock de compra en tactil */ top: auto; bottom: calc(100% - var(--space-1)); right: 0; translate: 0 4px; padding: var(--space-2); border-radius: var(--radius); background: var(--veil-10); color: var(--ink); font-family: var(--mono); font-feature-settings: normal; /* Media versalita, sin peso de mas */ font-size: var(--label); line-height: var(--leading-xs); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.24s var(--ease), translate 0.24s var(--ease); } .bottom-bar [data-copied] .copy-tip { opacity: 1; translate: 0 0; } .bottom-bar .icon-letter, .bottom-bar .icon-up { width: 20px; height: 20px; } .bottom-bar .icon-mail { display: none; width: 20px; height: 20px; } /* Vuelta arriba con desplazamiento suave; en reduced-motion, salto directo */ @media (prefers-reduced-motion: no-preference) { html:has(.bottom-up) { scroll-behavior: smooth; }} .bottom-up { justify-self: stretch; } @media (max-width: 960px) { .bottom-bar ul { column-gap: 0; } /* Margen inferior para que el dock de compra no tape la fila */ .bottom-bar { margin-bottom: var(--space-24); }} @media (max-width: 767px) { /* Mismo aire arriba y abajo de la fila, por encima del dock de compra */ .bottom-bar { margin-bottom: calc(var(--space-24) + var(--space-8)); } /* En pantalla estrecha la vuelta arriba sobra: el gesto de scroll ya la hace */ .bottom-up { display: none; } /* Cuatro celdas repartiendo el ancho a partes iguales */ .bottom-bar ul { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; } .bottom-bar a { justify-content: center; padding-inline: var(--space-2); width: 100%; } .bottom-bar li { justify-self: stretch; } /* Contactar pasa a icono: el rotulo no cabe en una celda estrecha */ .bottom-bar .icon-mail { display: block; } .bottom-bar .bottom-label { display: none; }} /* ---- Pie .club: modulo universal, no propio de una variante ---- */ /* En el flujo del documento sale hasta el borde de la ventana sea cual sea su contenedor (con .wrap o sin el); la cortina ya ocupa la ventana */ .club:not(.club--curtain) { margin-inline: calc(50% - 50vw); } /* ---- Variante cortina: el pie se fija al fondo de la ventana y el contenido lo tapa hasta el final del recorrido. Son dos reglas inseparables: el pie fijo y el main que lo cubre con fondo opaco y un escalon de apilamiento. Sin la segunda, el pie asoma desde el principio de la pagina. --foot-h lo mide ficha.js para reservar ese hueco al final del scroll; el rebote lo pinta el html. Se enciende solo si el pie cabe en la ventana. ---- */ /* Un solo bloque opaco tapa la cortina: .page entera, no hermano a hermano. Asi ningun hueco entre cabecera y contenido (el margen de cada familia) la deja asomar. El pie va FUERA de .page, hermano suyo. */ body:has(.club--curtain) > .page { position: relative; z-index: 1; background: var(--bg-body); } /* El rebote del scroll separa la pagina del borde superior y ahi asomaria el pie. Una banda del color de la ficha prolonga .page hacia arriba: al ser su hija comparte su escalon de apilamiento y tapa la cortina. */ body:has(.club--curtain) > .page::before { content: ""; position: absolute; inset: auto 0 100% 0; height: 100vh; background: var(--bg-body); pointer-events: none; } /* En cortina la tarjeta se cine para caber en una ventana de escritorio: el pie fijo no se puede recorrer con scroll, asi que si no cabe la cortina no se enciende y el bloque se queda en el flujo. Portada mas corta y un peldano menos de aire dentro y fuera. */ .club--curtain { /* Aire fluido: respira en pantalla alta y se cine en pantalla baja, que es lo que decide si la cortina puede encenderse */ padding-block: clamp(var(--space-6), 5vh, var(--space-16)); } /* La cortina llena la ventana en cualquier tamano y centra su contenido: asi el hueco que reserva la pagina coincide con su alto y no queda aire por arriba. No depende de la bandera, para que la medida del observador no se realimente. */ .club--curtain { /* Fondo propio: la franja del sobrescroll toma el color de la ficha y no el oscuro que pinta el navegador por color-scheme */ background: var(--bg-body); min-height: 100dvh; } /* Las dos tarjetas del pie cinen su aire en cortina: es lo que decide si el bloque cabe en la ventana y la cortina puede encenderse */ .club--curtain .club-card-form { padding-block: clamp(var(--space-4), 5vh, var(--space-16)); row-gap: clamp(var(--space-4), 4vh, var(--space-12)); } .club--curtain .bottom-bar { margin-block: 0 clamp(var(--space-4), 3vh, var(--space-8)); } /* La bandera la pone ficha.js cuando el pie cabe en la ventana, sea escritorio, tableta o movil. Sin JS no hay bandera y el pie va en el flujo: el respaldo seguro. */ [data-curtain="on"] .club--curtain { position: fixed; inset: auto 0 0; z-index: 0; width: 100%; } /* El hueco va en margin y fuera del bloque opaco: con padding lo cubriria el fondo de .page y el pie no se descubriria. Al margen de .page no le compite ningun delta de familia (el que declara margen es main). */ [data-curtain="on"] body:has(.club--curtain) > .page { margin-bottom: var(--foot-h, 0px); } @media (min-width: 961px) { .club-card-form { grid-column: 1 / span 8; }} .club-subtitle .icon-star { color: var(--accent); } .club-card-form-copy h2 { color: inherit; } /* El autorrelleno necesita un color opaco: un velo translucido deja pasar el amarillo del navegador */ .club-card-form-trust p { color: var(--veil-70); } /* ---- .field: campo con icono y boton en una capsula. Sirve para cualquier formulario (boletin, buscador, comentarios): el contexto solo declara su color. Dos mandos y nada mas: --field-text (lo escrito) y --field-line (borde, placeholder e icono). El texto no depende del estado, asi que el autorrelleno no puede dejarlo invisible. ---- */ .field { /* Campo opaco: el autorrelleno del navegador no admite un velo translucido, asi que el fondo se calcula sobre el papel. Las dos mezclas se declaran AQUI y no en :root: dentro de una custom property, var(--bg-body) se resuelve donde se escribe la declaracion, asi que en :root quedaria horneado el papel de la pagina y un bloque con papel propio (el pie) no lo alcanzaria. En .field llega heredado del bloque. */ --field-solid: color-mix(in srgb, #fff 4%, var(--bg-body)); /* Lo escrito: no depende de ningun estado, asi que el autorrelleno no puede dejarlo invisible */ --field-text: var(--ink); /* Filete, placeholder e icono se derivan de la tinta del campo, no de la de la pagina: asi un bloque con papel propio (el pie) los arrastra consigo */ --field-line: rgb(from var(--field-text) r g b / 0.1); /* Un solo destino para cursor encima y foco */ --field-line-hover: var(--accent); --field-line-focus: var(--accent); --field-bg: var(--veil-4); --field-bg-hover: var(--veil-10); --field-dim: var(--veil-50); --field-dim-soft: var(--veil-30); --field-icon: rgb(from var(--field-text) r g b / 0.6); --field-error: var(--accent-2); color: var(--field-line); } .field:focus-within { --field-line: var(--field-text); } /* ---- Estados del campo, comunes al boletin y al buscador: cada contexto pone su geometria y nada mas. El fondo se levanta al tocarlo, el filete recorre reposo, hover y foco, y el placeholder se retira un peldano al escribir. ---- */ .field input { color: var(--field-text); background: var(--field-bg); border: 1px solid var(--field-line); outline: none; transition: background 0.24s var(--ease), border-color 0.24s var(--ease); } .field input:hover { background: var(--field-bg-hover); border-color: var(--field-line-hover); } .field input:focus, .field input:active { background: var(--field-bg-hover); border-color: var(--field-line-focus); } .field input::placeholder { text-transform: none; color: var(--field-dim); /* text-fill-color se hereda del input y gana sobre color: repetirlo aqui */ -webkit-text-fill-color: var(--field-dim); opacity: 1; } .field input:focus::placeholder, .field input:active::placeholder { color: var(--field-dim-soft); -webkit-text-fill-color: var(--field-dim-soft); } /* El autorrelleno solo admite un color opaco: el velo del campo no taparia el amarillo del navegador, asi que aqui entra --field-solid */ .field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus { -webkit-text-fill-color: var(--field-text); box-shadow: 0 0 0 60px var(--field-solid) inset; } /* El navegador anade su propio boton de borrado en type=search */ .field input::-webkit-search-cancel-button, .field input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; } /* Icono dentro del campo, a la izquierda: se tinta con el color del campo */ .field-icon { background: var(--field-icon); } /* El campo del boletin usa los mismos mandos que el buscador; solo cambia la geometria (48px de alto y el boton en su propia columna) */ .club-card-form .field { width: min(420px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) auto; } .club-card-form .field input, .club-card-form .field .field-icon { grid-area: 1 / 1; } .club-card-form .field input { height: 48px; padding: 0 var(--space-4) 0 var(--space-12); line-height: 46px; font-size: var(--text-sm); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); } .club-card-form .field input::placeholder { font-size: var(--text-sm); line-height: 46px; } .club-card-form .field-icon { align-self: center; justify-self: start; margin-left: var(--space-4); pointer-events: none; } .club-card-form .field .field-btn { grid-area: 1 / 2; align-self: stretch; display: flex; align-items: center; justify-content: center; width: 140px; padding: 0; border: 1px solid var(--field-line); border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; /* Superficie velada al 90% con su tinta opuesta: el acento sobre un velo ligero no llega al contraste minimo en papel claro */ background: var(--veil-90); color: var(--cta-ink2); transition: background 0.32s var(--ease), color 0.32s var(--ease); } .club-card-form .field .field-btn:hover { background: var(--veil-70); color: var(--cta-ink2); } .club-card-form { background: var(--veil-4); color: var(--veil-90); display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); column-gap: var(--space-16); row-gap: var(--space-12); padding: var(--space-16) var(--space-12); border-radius: var(--radius) var(--radius) 0 0; } /* El ancho lo decide la retícula, no un tope en rem: entre 961 y 1240 la columna de texto es más estrecha que cualquier tope que pongamos */ .club-card-form-copy { min-width: 0; } .club-subtitle { color: var(--veil-70); display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-8); font-family: var(--mono); letter-spacing: 0.1em; font-feature-settings: normal; font-size: var(--label); line-height: var(--leading-xs); text-transform: uppercase; } .club-card-form-copy h2 { margin: 0 0 var(--space-12); font-size: var(--text-h4); line-height: var(--leading-h4); text-wrap: balance; } .club-card-form-field { width: min(100%, 520px); } .club-card-form-trust { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; text-align: right; } .club-card-form-avatars { display: flex; align-items: center; margin-bottom: var(--space-6); } .club-card-form-avatars img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; /* El cerco es el papel del pie: en un pie claro un filete negro cantaba */ border: 4px solid var(--bg-body); } .club-card-form-avatars img + img { margin-left: calc(-1 * var(--space-4)); } .club-card-form-trust p { display: flex; flex-direction: column; gap: var(--space-1); max-width: 32rem; margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); font-family: var(--mono); /* No es versalita: en minuscula el tracking va neutro */ letter-spacing: normal; font-feature-settings: normal; } .club-card-form-trust strong { font-weight: 400; } @media (max-width: 960px) { .club-card-form { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); } /* Una sola columna: el bloque de texto ya no compite con la prueba social */ .club-card-form-copy { max-width: none; } .club-card-form-field { width: 100%; } .club-card-form-trust { align-items: flex-start; justify-content: flex-start; text-align: left; }} @media (max-width: 767px) { .club-card-form { padding: var(--space-12) var(--space-8); } .club-subtitle { margin-bottom: var(--space-8); } .club-card-form-copy h2 { margin-bottom: var(--space-8); font-size: var(--text-xl); line-height: var(--leading-xl); } .club-card-form-avatars img { width: 40px; height: 40px; }} @media (max-width: 767px) { .club-card-form .field { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .club-card-form .field input { border-right: 1px solid var(--veil-30); border-radius: var(--radius); } .club-card-form .field .field-btn { grid-area: 2 / 1; width: 100%; height: 56px; border-radius: var(--radius); }} /* ---- Titulares dentro de una descripcion: iguales en cualquier plantilla ---- El gestor vuelca h2/h3/h4 sin clases, asi que el estilo cuelga del elemento. Sans (la serif se reserva al titular de la pagina), peso 500 y un peldano por nivel. El aire de arriba lo pone el par de la base; el de abajo, esta regla, porque las hojas de familia fijan margin en los parrafos y ganan al par. */ :is(.entry-description, .author-description) :is(h2, h3, h4) { margin-bottom: var(--space-8); font-family: var(--sans); font-feature-settings: normal; font-weight: 500; letter-spacing: normal; } :is(.entry-description, .author-description) h2 { font-size: var(--text-h4); line-height: var(--leading-h4); } :is(.entry-description, .author-description) h3 { font-size: var(--text-xl); line-height: var(--leading-xl); } :is(.entry-description, .author-description) h4 { font-size: var(--text-md); line-height: var(--leading-md); } /* ---- .button-primary: boton unico de la web ---- Superficie de acento plana, radio y rotulo en sans. Lo llevan el CTA de la ficha, el submit del modal (.shop-submit) y la tarjeta del dock (.dock-card); cada uno solo cambia su geometria propia (alto, padding y celdas internas). .buy-cta ya no pinta nada: es solo el gancho que abre el modal desde el JS. */ .button-primary { appearance: none; cursor: pointer; position: relative; z-index: 1; width: 100%; min-width: 0; flex: 1 1 auto; min-height: var(--space-14); border: 0; border-radius: var(--radius); /* La superficie va en su propio mando: el hover tiene que reponerla sin repetir el valor */ --gradient: linear-gradient(-61deg, var(--ocre-4), var(--ocre-5)); background: var(--gradient); color: var(--cta-ink); /* Rotulo a la izquierda y dato a la derecha; el filete del dato no llega al borde */ display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0 var(--space-2) var(--space-5); /* La versalita la trae el boton unico, no el reset de button: asi un con .button-primary sale igual que un