/* ============================================================================ BuildSigned — hoja del sitio de marketing. Los colores viven en tokens.css. ============================================================================ */ @layer reset, base, world, parts; @layer reset { *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } img { max-width: 100%; display: block; } /* Sin esto, una pagina que crece mete un salto horizontal al aparecer la barra de scroll. WEB_PATTERNS §4. */ html { scrollbar-gutter: stable; } } @layer base { /* GUARD DE IDIOMA CON FAILSAFE. El ingles vive en el HTML, asi que en ingles no se oculta nada. Solo el espanol espera al diccionario, y boot.js pone `.i18n-wait` en . La animacion de 0s con 1,5s de retraso lo revela SOLO, aunque i18n.js no llegue nunca. Un guard que no se levanta es una pagina en blanco permanente, y ese modo de falla es invisible en desarrollo porque ahi el camino feliz siempre corre. A los 1,5s se ve en ingles, que es infinitamente mejor que un vacio. */ .i18n-wait body { visibility: hidden; animation: i18n-failsafe 0s linear 1.5s forwards; } @keyframes i18n-failsafe { to { visibility: visible; } } /* El reset de reduced-motion NO puede tocar `animation-delay`: pondria el failsafe en 0s y reintroduciria el destello que el guard evita. WEB_PATTERNS §2.2. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .i18n-wait body { animation-duration: 0s !important; } } body { background: var(--felt); color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.55; /* Sin `-webkit-font-smoothing: antialiased`. Sobre fondo oscuro ADELGAZA el texto claro: el navegador deja de usar subpixel y los trazos pierden peso optico. El ratio de contraste sale verde igual, pero el parrafo se lee desvanecido. */ } h1, h2, h3 { font-family: var(--slab); font-weight: 700; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); line-height: 0.99; letter-spacing: -0.022em; } h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.08; letter-spacing: -0.014em; } h3 { font-size: 1.05rem; line-height: 1.2; } p { margin: 0 0 0.9rem; } :where(a, button):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } } @layer world { .wrap { max-width: var(--rail); margin-inline: auto; padding-inline: var(--gap); } /* Toda pieza que trae SU PROPIO papel trae SU PROPIA tinta. Heredar el color de una seccion oscura deja el titulo en cartulina sobre cartulina: invisible, sin error en consola y sin que ningun gate de texto lo vea. */ :is(.card, .back, .sheet, .role, .tier, .checklist, .pantalla) { color: var(--ink); } /* La etiqueta de categoria: al piso de tamano, CON peso, y no con el color mas tenue de la paleta. Es lo que orienta al visitante, no metadata. */ .eyebrow { font-family: var(--stat); font-size: var(--floor); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 0.75rem; } /* --- la carta: el marco de color de equipo es el marco entero, como en el cromo real, no un acento lateral --- */ .card, .back { inline-size: var(--card-w); aspect-ratio: 5 / 7; padding: 0.9rem; display: flex; flex-direction: column; box-shadow: 0 12px 28px -14px rgb(0 0 0 / 0.6); } .card { background: var(--card); border: 10px solid var(--team-a); } .card.b { border-color: var(--team-b); } .card.g { border-color: var(--gold); } .card .who { font-family: var(--slab); font-size: 1.2rem; line-height: 1.06; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); } .card .pos { font-family: var(--stat); font-size: var(--floor); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin-top: 0.25rem; } .shot { margin: 0.7rem 0 0.6rem; flex: 1; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 7%, transparent) 0 6px, transparent 6px 12px), var(--card-back); border: 1px solid var(--rule); display: grid; place-items: center; text-align: center; padding: 0.5rem; font-family: var(--stat); font-size: var(--floor); font-weight: 700; /* --ink-3 sobre el papel del dorso da 4.10:1, bajo el AA de 4.5. */ letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); } .card .foot-line { font-family: var(--stat); font-size: var(--floor); font-variant-numeric: tabular-nums; color: var(--ink-2); display: flex; justify-content: space-between; gap: 0.5rem; } .flag { align-self: flex-start; font-family: var(--stat); font-size: var(--floor); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; background: var(--gold); color: var(--gold-ink); padding: 0.25rem 0.5rem; } /* --- el dorso: tabla reglada de estadisticas --- */ .back { background: var(--card-back); border: 10px solid var(--gold); gap: 0.55rem; } .back h3 { text-transform: uppercase; font-size: 1rem; } .stat-table { border-collapse: collapse; width: 100%; font-family: var(--stat); font-size: var(--floor); } .stat-table th, .stat-table td { text-align: start; padding: 0.3rem 0.2rem; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; } /* --ink-3 sobre el papel del dorso daba 4.10:1, bajo el AA de 4.5. El encabezado de una tabla de datos dice que columna estas leyendo. */ .stat-table thead th { font-size: var(--floor); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .stat-table td.r, .stat-table th.r { text-align: end; } .stat-table tr.total td { font-weight: 700; color: var(--ink); } } @layer parts { /* ---------- barra superior ---------- */ header.top { border-bottom: 1px solid color-mix(in srgb, var(--on-felt) 22%, transparent); } header.top .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 0.9rem; flex-wrap: wrap; } /* La marca de la barra es SOLO el producto. Miurata es la duena del IP y vive en el pie como derechos reservados, no compitiendo arriba con el nombre que el visitante vino a buscar. */ .brand { font-family: var(--slab); font-size: 1.15rem; text-transform: uppercase; color: var(--on-felt); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .brand-mark { inline-size: 1.35rem; block-size: auto; } nav.top-nav { display: flex; gap: 1.2rem; flex-wrap: wrap; font-family: var(--stat); font-size: var(--floor); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } nav.top-nav a { color: var(--on-felt-dim); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } nav.top-nav a:hover { color: var(--on-felt); } /* ---------- controles de preferencia ---------- Idioma y tema comparten forma porque son la misma clase de control. Mas chicos que un boton de accion A PROPOSITO: son preferencias, no algo que alguien viene a hacer. Al tamano de un boton normal competian con el acceso y ademas empujaban la barra. 28px de alto queda por encima del minimo de 24 que pide WCAG 2.2 para objetivo tactil. */ .topbar-ctl { display: flex; align-items: center; gap: 0.6rem; } .seg { display: inline-flex; border: 1px solid color-mix(in srgb, var(--on-felt) 34%, transparent); overflow: hidden; } .seg button { font-family: var(--stat); font-size: var(--floor); font-weight: 700; letter-spacing: 0.06em; padding: 0.25rem 0.5rem; min-height: 28px; border: 0; background: none; color: var(--on-felt-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .seg button + button { border-inline-start: 1px solid color-mix(in srgb, var(--on-felt) 34%, transparent); } .seg button:hover { color: var(--on-felt); } .seg button[aria-pressed="true"] { background: var(--on-felt); color: var(--felt); } .seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } /* UN ICONO, NO UNA PALABRA. Resuelve el problema en vez de compensarlo: con texto el boton medía lo que midiera la etiqueta activa y cada clic lo encogia o lo ensanchaba, EMPUJANDO TODO LO QUE VIENE DESPUES EN LA BARRA. Un icono mide 16x16 y no cambia. Ademas se traduce solo, porque no hay nada que traducir. El icono muestra el DESTINO, no el estado: con la pagina clara se ve una luna, que es a donde vas si pulsas. */ .theme-btn { display: inline-flex; align-items: center; justify-content: center; } .theme-btn .ico { display: block; flex: none; } .theme-btn[data-theme-state="dark"] .ico-moon { display: none; } .theme-btn[data-theme-state="light"] .ico-sun { display: none; } /* Sin estado estampado todavia (antes de que corra el JS) se ensena la luna, que es lo correcto para el tema claro por defecto. */ .theme-btn:not([data-theme-state]) .ico-sun { display: none; } /* ---------- hero ---------- */ .hero { padding-block: clamp(2.2rem, 6vw, 4.5rem); color: var(--on-felt); overflow-x: clip; } .hero .wrap { display: grid; grid-template-columns: minmax(26rem,1fr) auto; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .hero h1 { color: var(--on-felt); text-wrap: wrap; } .hero .eyebrow { color: var(--on-felt-dim); } /* Peso 600 sobre el fieltro, y la razon esta MEDIDA: el mismo 400 se ve mas fino en claro sobre oscuro que al reves, y en el stack de sistema de Windows 400/450/500 renderizan identico -- no hay medium -- asi que declarar 500 es codigo muerto. El primer salto real es 600. */ .hero p.lede { color: var(--on-felt); font-weight: 600; max-width: 46ch; font-size: clamp(1.02rem, 1.6vw, 1.18rem); margin-block: 1.1rem 1.6rem; } .hero .fineprint { font-family: var(--stat); font-size: var(--floor); font-weight: 600; letter-spacing: 0.06em; color: var(--on-felt-dim); margin-top: 1rem; } /* El abanico. El solape se mide contra el NOMBRE de la carta, que esta arriba a la izquierda: mas solape y se tapa justo lo que hay que poder leer. */ .deal { display: flex; align-items: center; } .deal > * { flex: none; } .deal > *:nth-child(1) { rotate: -7deg; z-index: 1; } .deal > *:nth-child(2) { rotate: 2deg; margin-inline-start: -2.6rem; z-index: 3; } .deal > *:nth-child(3) { rotate: 8deg; margin-inline-start: -2.6rem; z-index: 2; } .cta { font-family: var(--slab); text-transform: uppercase; font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; background: var(--gold); color: var(--gold-ink); border: none; padding: 0.85rem 1.6rem; cursor: pointer; min-height: 46px; text-decoration: none; display: inline-flex; align-items: center; transition: translate 140ms cubic-bezier(.2,.7,.3,1); } .cta:hover { translate: 0 -2px; } /* El fantasma toma su tinta del fondo donde cae, y por defecto ese fondo es cartulina. Estaba clavado en `--on-felt` porque solo existia dentro del hero, que es fieltro; la primera vez que se uso en una seccion clara salio crema sobre crema, 1.00:1, invisible. Lo caza `gate-contraste-web`, no la vista: el color computado se reporta solido y el grep dice que el texto esta ahi, que no es la pregunta. */ .cta.ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 2px currentColor; } .hero .cta.ghost, section.sec.dark .cta.ghost { color: var(--on-felt); } .cta-row { display: flex; gap: 0.8rem; flex-wrap: wrap; } /* ---------- secciones ---------- */ section.sec { padding-block: clamp(2.4rem, 5.5vw, 4rem); background: var(--card); } section.sec.dark { background: var(--felt); color: var(--on-felt); } section.sec.dark .eyebrow { color: var(--on-felt-dim); } section.sec + section.sec { border-top: 1px solid var(--rule); } .sec p.body { max-width: 64ch; color: var(--ink-2); } section.sec.dark p.body { color: var(--on-felt); font-weight: 600; } /* La cadena: siete casillas, siete columnas. Con auto-fit entraban seis y la septima quedaba sola en una fila con cinco huecos: dejaba de leerse como una corrida. */ .chain { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--rule); margin-top: 1.6rem; } .chain div { padding: 0.9rem 0.85rem; border-inline-end: 1px solid var(--rule); } .chain div:last-child { border-inline-end: none; } .chain .step { font-family: var(--stat); font-size: var(--floor); font-weight: 700; letter-spacing: 0.1em; color: var(--on-felt-dim); display: block; } .chain .lab { font-family: var(--slab); font-size: 1rem; font-weight: 700; display: block; margin-top: 0.25rem; } /* Oro solido con tinta oscura, igual que la bandera de rookie. Un lavado translucido sobre el fieltro dejaba la numeracion en tinta oscura sobre fondo oscuro. */ .chain div.hot { background: var(--gold); color: var(--gold-ink); } .chain div.hot .step { color: var(--gold-ink); } @media (max-width: 62rem) { .chain { grid-template-columns: repeat(2, minmax(0,1fr)); } .chain div { border-block-end: 1px solid var(--rule); } .chain div:nth-child(2n) { border-inline-end: none; } .chain div:last-child { border-block-end: none; } } /* ---------- el inspector en campo ---------- */ .rig { display: flex; align-items: flex-start; justify-content: center; margin-top: 1.8rem; } .rig > * { flex: none; } .rig > *:nth-child(1) { rotate: -4deg; z-index: 1; } .rig > *:nth-child(2) { rotate: 3deg; margin-inline-start: -1.6rem; z-index: 2; } .fono { inline-size: 16.5rem; background: #100F0A; border: 9px solid #100F0A; border-radius: 1.5rem; box-shadow: 0 16px 34px -16px rgb(0 0 0 / 0.75); } .pantalla { background: var(--card); border-radius: 0.85rem; overflow: hidden; display: flex; flex-direction: column; } .p-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.7rem; border-block-end: 1px solid var(--rule); font-family: var(--stat); font-size: var(--floor); font-weight: 700; letter-spacing: 0.06em; color: var(--ink-2); } .p-body { padding: 0.75rem 0.7rem 0.9rem; display: grid; gap: 0.55rem; } .p-body h4 { font-family: var(--slab); font-size: 1rem; margin: 0; } .p-meta { font-family: var(--stat); font-size: var(--floor); color: var(--ink-2); font-variant-numeric: tabular-nums; } /* El aviso de bloqueo es el corazon del argumento, no un detalle de UI. */ .p-lock { display: flex; gap: 0.45rem; align-items: start; background: var(--card-back); border: 1px solid var(--rule); padding: 0.5rem 0.55rem; font-size: var(--floor); color: var(--ink-2); font-weight: 600; line-height: 1.4; } .p-sect { font-family: var(--stat); font-size: var(--floor); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 0.2rem; } .p-task { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; } .p-box { inline-size: 1.05rem; block-size: 1.05rem; border: 2px solid var(--rule); flex: none; display: grid; place-items: center; font-size: 0.7rem; font-weight: 700; } .p-box.on { background: var(--team-a); border-color: var(--team-a); color: var(--card); } .p-task.off { color: var(--ink-3); } .p-cta { background: var(--gold); color: var(--gold-ink); border: none; inline-size: 100%; font-family: var(--slab); font-weight: 700; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.02em; padding: 0.6rem; min-height: 44px; margin-top: 0.25rem; cursor: pointer; } .p-field { border-block-end: 1px solid var(--rule); padding-block-end: 0.32rem; } .p-field .k { display: block; font-family: var(--stat); font-size: var(--floor); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); } .p-field .v { font-family: var(--stat); font-size: 0.875rem; font-variant-numeric: tabular-nums; } .p-shot { block-size: 5rem; border: 1px solid var(--rule); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 7%, transparent) 0 6px, transparent 6px 12px), var(--card-back); display: grid; place-items: center; font-family: var(--stat); font-size: var(--floor); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); } .p-mic { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--team-b); color: var(--card); border: none; font-family: var(--stat); font-size: var(--floor); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.5rem; min-height: 32px; } .p-mic .dot { inline-size: 0.45rem; block-size: 0.45rem; border-radius: 50%; background: currentColor; animation: latir 1.1s ease-in-out infinite; } @keyframes latir { 50% { opacity: 0.25; } } .estados { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border: 1px solid color-mix(in srgb, var(--on-felt) 26%, transparent); margin-top: 1.8rem; } .estados div { padding: 0.8rem; border-inline-end: 1px solid color-mix(in srgb, var(--on-felt) 26%, transparent); } .estados div:last-child { border-inline-end: none; } .estados .e { font-family: var(--slab); font-size: 0.95rem; font-weight: 700; display: block; } .estados .q { font-family: var(--stat); font-size: var(--floor); font-weight: 600; color: var(--on-felt-dim); display: block; margin-top: 0.2rem; } .estados div.abre { background: var(--gold); color: var(--gold-ink); } .estados div.abre .q { color: var(--gold-ink); } @media (max-width: 62rem) { .estados { grid-template-columns: repeat(2, minmax(0,1fr)); } .estados div { border-block-end: 1px solid color-mix(in srgb, var(--on-felt) 26%, transparent); } .rig { flex-direction: column; align-items: center; gap: 1.4rem; } .rig > *:nth-child(2) { margin-inline-start: 0; } .rig > * { rotate: 0deg !important; } } .aparato { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem,100%),1fr)); gap: 1.1rem; margin-top: 1.8rem; } .aparato div { border: 1px solid color-mix(in srgb, var(--on-felt) 26%, transparent); padding: 0.9rem 1rem; } .aparato .t { font-family: var(--slab); font-size: 0.98rem; font-weight: 700; display: block; } .aparato .d { font-size: 0.9rem; font-weight: 600; color: var(--on-felt-dim); } /* ---------- el dorso ampliado ---------- */ .split { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-top: 1.6rem; } /* Marco entero, no una pestana lateral: es el dorso de la carta ampliado. */ .sheet { background: var(--card-back); border: 10px solid var(--gold); padding: 1.2rem 1.3rem; } .sheet .stat-table { font-size: 0.875rem; } .sheet .stat-table th, .sheet .stat-table td { padding: 0.5rem 0.3rem; } /* ---------- cifras medidas ---------- */ .checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem,100%),1fr)); border: 1px solid var(--rule); margin-top: 1.6rem; background: var(--card); } .checklist div { padding: 1.05rem 1.1rem; border-inline-end: 1px solid var(--rule); border-block-end: 1px solid var(--rule); } .checklist div:last-child { border-inline-end: none; } .checklist .n { font-family: var(--stat); font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; display: block; line-height: 1.1; color: var(--ink); } .checklist .k { font-size: 0.9rem; color: var(--ink-2); display: block; margin-top: 0.2rem; } /* Siete disparadores en cuatro columnas dejan una celda vacia. Con el truco de "fondo de regla + gap de 1px" esa celda sale como un bloque gris solido. Las reglas van en las celdas y lo que sobra queda en blanco. */ ul.triggers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem,100%),1fr)); border-block-start: 1px solid var(--rule); margin: 1.6rem 0 0; padding: 0; } .triggers li { padding: 0.95rem 1.1rem; list-style: none; border-block-end: 1px solid var(--rule); border-inline-end: 1px solid var(--rule); } .triggers li:last-child { border-inline-end: none; } .triggers .t { font-family: var(--slab); font-size: 1rem; display: block; } .triggers .d { font-size: 0.9rem; color: var(--ink-2); } /* Cuatro cartas del mismo mazo, con marco completo en color de equipo: no fichas con una pestana de color arriba. */ .roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem,100%),1fr)); gap: 1.1rem; margin-top: 1.6rem; } .role { background: var(--card); border: 6px solid var(--team-a); padding: 1.1rem 1.2rem; } .role.no { border-color: var(--team-b); } .role h3 { margin-bottom: 0.4rem; } .role p { font-size: 0.94rem; color: var(--ink-2); margin: 0; } /* ---------- precio ---------- */ .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13.5rem,100%),1fr)); gap: 1.1rem; margin-top: 1.6rem; } .tier { background: var(--card); border: 8px solid var(--team-c); padding: 1.2rem; display: flex; flex-direction: column; gap: 0.55rem; } .tier.pick { border-color: var(--gold); box-shadow: 0 12px 28px -18px rgb(0 0 0 / 0.7); } .tier .name { font-family: var(--slab); font-size: 1.15rem; text-transform: uppercase; } .tier .price { font-family: var(--stat); font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .tier .per { font-family: var(--stat); font-size: var(--floor); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; } .tier ul { margin: 0.4rem 0 0; padding: 0; list-style: none; font-size: 0.92rem; color: var(--ink-2); display: grid; gap: 0.35rem; } .tier li::before { content: "· "; color: var(--ink-3); } .filler { font-family: var(--stat); font-size: var(--floor); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--team-b); margin-top: 1.1rem; display: block; } /* ---------- pie ---------- */ footer.foot { background: var(--felt); color: var(--on-felt-dim); font-family: var(--stat); } .foot-grid { display: grid; grid-template-columns: minmax(0,1.6fr) repeat(3, minmax(0,1fr)); gap: 1.6rem clamp(1rem,3vw,2.5rem); padding-block: 2.4rem 1.8rem; } .foot-col h2 { font-family: var(--stat); font-size: var(--floor); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--on-felt-dim); margin: 0 0 0.7rem; } .foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; } .foot-col a { color: var(--on-felt); text-decoration: none; font-size: 0.92rem; font-weight: 600; font-family: var(--text); } .foot-col a:hover { text-decoration: underline; text-underline-offset: 3px; } .foot-col .marca { font-family: var(--slab); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; color: var(--on-felt); display: block; } .foot-col .tag { font-family: var(--text); font-size: 0.92rem; font-weight: 600; color: var(--on-felt-dim); max-width: 34ch; margin: 0.6rem 0 0; } .foot-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-block-start: 1px solid color-mix(in srgb, var(--on-felt) 22%, transparent); padding-block: 1.1rem 2.4rem; font-size: var(--floor); font-weight: 600; letter-spacing: 0.05em; } @media (max-width: 56rem) { .hero .wrap { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; } .deal > *:nth-child(3) { display: none; } .foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 30rem) { :root { --card-w: 15rem; } .deal > *:nth-child(1) { display: none; } .deal > *:nth-child(2) { margin-inline-start: 0; rotate: 0deg; } } } /* ============================================================================ Piezas que aparecieron al partir el sitio en diez paginas. Se reabre `parts` a proposito: las capas de CSS se pueden reabrir, y meter esto en una capa nueva lo pondria por encima de todo lo anterior sin que nadie lo pidiera. ============================================================================ */ @layer parts { /* El `lede` existia solo dentro del hero. Al haber una portada por pagina, cada una abre con uno y necesitaba su propia regla: sin ella heredaba el tamano de cuerpo y el primer parrafo dejaba de leerse como entrada. */ .sec p.lede { color: var(--ink-2); font-weight: 600; max-width: 52ch; font-size: clamp(1.02rem, 1.6vw, 1.18rem); margin-block: 1rem 0; } section.sec.dark p.lede { color: var(--on-felt); } /* Las tarjetas de "a donde seguir" son enlaces, no cajas. Sin esto salen subrayadas y en azul de navegador encima de la cartulina. */ a.role { text-decoration: none; display: block; transition: translate 0.12s ease; } a.role:hover { translate: 0 -2px; } a.role:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } /* La tabla comparativa tiene tres columnas de texto y a 390px no cabe. Va en su propio contenedor con scroll: el que se desborda es el bloque, nunca el documento. WEB_PATTERNS §6 -- `overflow-x` en el body esconde el bug en vez de arreglarlo, y ademas no se ve en revision visual. */ .tbl-scroll { overflow-x: auto; } .tbl-scroll .stat-table { min-inline-size: 34rem; } } @layer parts { /* ---------- el wordmark de dos tonos ---------- La marca es TEXTO VIVO partido en dos colores, no una imagen: queda seleccionable, se lee con lector de pantalla, y no depende de que el .svg y la fuente instalada coincidan. Lo especifica web/img/LEEME-logo.md. NO se usa flex aqui, y esa es la correccion al CSS del LEEME: declaraba `flex-direction: column` y despues pedia `display: inline` en los hijos, pero un hijo de contenedor flex se blockifica y ese `inline` se descarta. El resultado habrian sido tres filas -- Build / Signed / raya -- en vez de una linea con su raya debajo. Con `inline-block` los dos span fluyen en la misma linea y el `::after`, que es bloque, cae debajo con el ancho justo. La primera mitad hereda `currentColor` a proposito: es el color de CONTRASTE con el fondo, no un verde fijo. Sobre el fieltro de la barra sale cartulina; el dia que la marca se pinte sobre cartulina saldra fieltro, sin tocar esta regla. */ .brand-word { display: inline-block; line-height: 1; } .brand-word > span { display: inline; } .brand-word > span:first-child { color: currentColor; } .brand-word > span:nth-child(2) { color: var(--gold-on-felt); } .brand-word::after { content: ""; display: block; height: 2px; background: var(--gold-on-felt); margin-top: 3px; } }