/* paginas.css - estructura de las páginas de ejemplo (cabecera, portada, pie, catálogo del UI kit). */

.cabecera { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / 97%); box-shadow: 0 1px 0 var(--borde-suave); padding-top: var(--safe-t); }
.cabecera__in { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.marca { display: inline-flex; align-items: center; min-height: var(--tactil); margin-right: auto; }
.marca img { height: 34px; width: auto; }

.portada { position: relative; overflow: hidden; color: #fff; background: var(--secundario); }
.portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.portada::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(0 62 113 / 78%), rgb(0 62 113 / 90%)); }
.portada__cont { position: relative; z-index: 2; padding-block: 48px 36px; display: grid; gap: 16px; max-width: 560px; }
.portada h1 { color: #fff; }
.portada .sobretitulo { color: #fff; opacity: .92; }
.portada__texto { color: rgb(255 255 255 / 92%); }
.portada__botones { display: grid; gap: 12px; margin-top: 8px; }
@media (min-width: 768px) { .portada__botones { display: flex; flex-wrap: wrap; } }

.servicios-ej { display: grid; gap: 16px; }
.cobs { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.cobs img { height: 32px; width: auto; }

.pie-pagina { background: var(--secundario); color: #fff; padding-block: 32px calc(32px + var(--safe-b)); }
.pie-pagina a { color: #fff; }
.pie-pagina .texto-chico { opacity: .92; }

/* Catálogo (_ui-kit.html) */
.kit-nav { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.kit-bloque { display: grid; gap: 16px; padding-block: 28px; border-top: 1px solid var(--borde-suave); }
.kit-bloque > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kit-paleta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kit-color { display: grid; gap: 6px; font-size: 13px; }
.kit-color__muestra { height: 44px; border-radius: 10px; border: 1px solid var(--borde-suave); }
.kit-color__muestra--primario { background: var(--primario); }
.kit-color__muestra--secundario { background: var(--secundario); }
.kit-color__muestra--acento { background: var(--acento); }
.kit-color__muestra--superficie { background: var(--superficie); }
.kit-color__muestra--ok { background: var(--ok); }
.kit-color__muestra--error { background: var(--error); }
.kit-color__muestra--texto { background: var(--texto); }
.kit-color__muestra--texto2 { background: var(--texto2); }
@media (min-width: 640px) { .kit-paleta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kit-tipos { display: grid; gap: 8px; }
.kit-display { font-family: var(--f-display); font-weight: 700; font-size: 28px; color: var(--secundario); }