/* ========================================================================== components.css — Capa 4: Piezas reutilizables (BEM) -------------------------------------------------------------------------- Un bloque = una responsabilidad. Se extienden con modificadores, nunca sobrescribiéndolos desde sections.css. ========================================================================== */ /* -------------------------------------------------------------------------- Utilidades mínimas (solo las que se usan más de una vez) -------------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .svg-sprite { display: none; } /* -------------------------------------------------------------------------- Bloque: skip-link -------------------------------------------------------------------------- */ .skip-link { position: absolute; top: var(--space-2xs); left: var(--space-2xs); z-index: var(--z-skip); padding: var(--space-2xs) var(--space-sm); background-color: var(--color-accent); color: var(--color-on-accent); font-weight: var(--weight-semibold); border-radius: var(--radius-sm); text-decoration: none; transform: translateY(-200%); transition: transform var(--motion-fast) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0); } /* -------------------------------------------------------------------------- Bloque: icon (consume el sprite SVG del documento) -------------------------------------------------------------------------- */ .icon { width: var(--icon-size, 1.5rem); height: var(--icon-size, 1.5rem); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* -------------------------------------------------------------------------- Bloque: brand -------------------------------------------------------------------------- */ .brand { display: inline-flex; align-items: center; min-height: var(--tap-target); gap: var(--space-2xs); color: var(--color-text-heading); font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: var(--tracking-tight); text-decoration: none; } /* El logotipo es un PNG monocromo usado como MÁSCARA: la imagen aporta la forma (su canal alfa) y el color lo pone CSS. Así cambiar --brand-heading en tokens.css también repinta el logo. Un con filter: invert() se quedaría con un blanco fijo, ajeno al sistema de tokens. */ .brand__mark { width: 2.25rem; height: 2.25rem; flex: none; background-color: var(--color-text-heading); -webkit-mask: url("/assets/img/logo.webp") center / contain no-repeat; mask: url("/assets/img/logo.webp") center / contain no-repeat; } .brand__name > span { color: var(--color-accent); } /* -------------------------------------------------------------------------- Bloque: site-nav Sin JavaScript la lista queda siempre visible y utilizable. El plegado en móvil solo se activa cuando lleva data-js. -------------------------------------------------------------------------- */ .site-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-sm); } .site-nav__link { display: flex; align-items: center; min-height: var(--tap-target); padding-inline: var(--space-2xs); color: var(--color-text-body); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; border-radius: var(--radius-sm); transition: color var(--motion-fast) var(--ease-out); } .site-nav__link:hover { color: var(--color-accent); } /* -------------------------------------------------------------------------- Bloque: nav-toggle -------------------------------------------------------------------------- */ .nav-toggle { display: none; align-items: center; justify-content: center; width: var(--tap-target); height: var(--tap-target); margin-left: auto; color: var(--color-text-heading); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); } .nav-toggle__close, .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; } /* Comportamiento plegable: solo con JS disponible */ [data-js] .nav-toggle { display: inline-flex; } [data-js] .site-nav { display: none; width: 100%; } [data-js] .site-nav[data-open] { display: block; padding-block: var(--space-2xs) var(--space-sm); } [data-js] .site-nav[data-open] .site-nav__list { flex-direction: column; gap: var(--space-3xs); } /* La barra horizontal completa solo cabe desde 1024px: por debajo, hamburguesa */ @media (min-width: 1024px) { [data-js] .nav-toggle { display: none; } [data-js] .site-nav, [data-js] .site-nav[data-open] { display: block; width: auto; padding-block: 0; } [data-js] .site-nav[data-open] .site-nav__list { flex-direction: row; gap: var(--space-3xs) var(--space-sm); } } /* -------------------------------------------------------------------------- Bloque: btn -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: var(--tap-target); padding: var(--space-2xs) var(--space-md); font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug); text-align: center; text-decoration: none; border: var(--border-width) solid transparent; border-radius: var(--radius-sm); transition: transform var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { background-color: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-accent); } .btn--ghost { color: var(--color-text-heading); border-color: var(--color-border-strong); } .btn--ghost:hover { border-color: var(--color-accent-line); color: var(--color-accent); } .btn--lg { min-height: 3.25rem; padding-inline: var(--space-lg); font-size: var(--text-base); } .btn--block { width: 100%; } /* -------------------------------------------------------------------------- Bloque: badge -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--space-3xs); padding: var(--space-3xs) var(--space-xs); background-color: var(--color-accent-soft); border: var(--border-width) solid var(--color-accent-line); border-radius: var(--radius-pill); color: var(--color-accent); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .badge--muted { background-color: transparent; border-color: var(--color-border-strong); color: var(--color-text-muted); } /* -------------------------------------------------------------------------- Bloque: eyebrow (antetítulo de sección) -------------------------------------------------------------------------- */ .eyebrow { display: block; color: var(--color-accent); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; } /* -------------------------------------------------------------------------- Bloque: card — único componente de tarjeta del sitio. Lo usan servicios, soluciones, compromisos y modelos de contratación. -------------------------------------------------------------------------- */ .card { display: flex; flex-direction: column; gap: var(--space-xs); height: 100%; padding: var(--space-md); background-color: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out); } .card:hover { transform: translateY(-2px); border-color: var(--color-accent-line); } .card__icon { --icon-size: 1.375rem; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background-color: var(--color-accent-soft); border: var(--border-width) solid var(--color-accent-line); border-radius: var(--radius-md); color: var(--color-accent); } .card__text { color: var(--color-text-body); font-size: var(--text-sm); } .card__footer { margin-top: auto; padding-top: var(--space-xs); } /* Modificador: tarjeta destacada (SIGESP) */ .card--feature { border-color: var(--color-accent-line); background-image: linear-gradient( 160deg, var(--color-accent-soft), transparent 55% ); } /* Modificador: tarjeta compacta sin elevación (compromisos) */ .card--flat { box-shadow: none; background-color: transparent; } /* -------------------------------------------------------------------------- Bloque: feature-list — lista de puntos con marca de verificación -------------------------------------------------------------------------- */ .feature-list { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); } .feature-list__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs); align-items: start; } .feature-list__icon { --icon-size: 1.125rem; margin-top: 0.2em; color: var(--color-accent); } /* -------------------------------------------------------------------------- Bloque: illus — ilustraciones de sección. Van en línea en el HTML, no como archivos .svg externos: un SVG externo no puede leer las custom properties del documento, y estas piezas tienen que repintarse con la marca igual que el resto. Mismo lenguaje de trazo que el sprite de iconos, para que se lean como una familia. -------------------------------------------------------------------------- */ .illus { display: block; width: 100%; height: auto; max-width: 26rem; margin-inline: auto; stroke-linecap: round; stroke-linejoin: round; } .illus__panel { fill: var(--color-surface-raised); stroke: var(--color-border-strong); stroke-width: 1.5; } .illus__chip { fill: var(--color-accent-soft); stroke: var(--color-accent-line); stroke-width: 1.5; } .illus__line { fill: none; stroke: var(--color-border-strong); stroke-width: 1.5; } .illus__accent { fill: none; stroke: var(--color-accent); stroke-width: 2; } .illus__ink { fill: var(--color-border-strong); stroke: none; } .illus__mark { fill: var(--color-accent); stroke: none; } /* -------------------------------------------------------------------------- Bloque: stat — indicador de confianza -------------------------------------------------------------------------- */ .stat { padding: var(--space-md); background-color: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); } .stat__value { display: block; color: var(--color-text-heading); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } .stat__label { display: block; margin-top: var(--space-3xs); color: var(--color-text-muted); font-size: var(--text-sm); } /* -------------------------------------------------------------------------- Bloque: step — fase de la metodología -------------------------------------------------------------------------- */ .step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); padding-bottom: var(--space-lg); } .step:last-child { padding-bottom: 0; } /* Línea conectora entre fases */ .step:not(:last-child)::before { content: ""; position: absolute; top: 2.75rem; bottom: var(--space-2xs); left: 1.375rem; width: var(--border-width); background-color: var(--color-border-strong); } .step__number { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background-color: var(--color-surface); border: var(--border-width) solid var(--color-accent-line); border-radius: var(--radius-pill); color: var(--color-accent); font-size: var(--text-sm); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; } .step__body > * + * { margin-top: var(--space-3xs); } .step__text { font-size: var(--text-sm); max-width: var(--measure); } @media (min-width: 1024px) { .step { grid-template-columns: 1fr; gap: var(--space-xs); padding-bottom: 0; } .step:not(:last-child)::before { top: 1.375rem; right: calc(var(--space-md) * -1); bottom: auto; left: 3.25rem; width: auto; height: var(--border-width); } } /* -------------------------------------------------------------------------- Bloque: tech-list — pastillas de tecnologías -------------------------------------------------------------------------- */ .tech-list { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-2xs); } .tech-list__item { padding: var(--space-3xs) var(--space-2xs); background-color: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-2xs); } /* -------------------------------------------------------------------------- Bloque: contact-card — enlace de contacto directo (sin backend) -------------------------------------------------------------------------- */ .contact-card { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-sm); align-items: center; min-height: var(--tap-target); padding: var(--space-md); background-color: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; transition: transform var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out); } .contact-card:hover { transform: translateY(-2px); border-color: var(--color-accent-line); } .contact-card__icon { --icon-size: 1.375rem; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background-color: var(--color-accent-soft); border-radius: var(--radius-md); color: var(--color-accent); } .contact-card__label { display: block; color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .contact-card__value { display: block; color: var(--color-text-heading); font-weight: var(--weight-semibold); overflow-wrap: anywhere; } /* -------------------------------------------------------------------------- Bloque: placeholder — marca visible de dato pendiente de completar -------------------------------------------------------------------------- */ .placeholder { padding-inline: var(--space-3xs); background-color: var(--color-accent-soft); border-bottom: var(--border-width-thick) dashed var(--color-accent-line); color: var(--color-accent); font-family: var(--font-mono); font-size: 0.9em; overflow-wrap: anywhere; }