/** * UGEL Parinacochas — theme stylesheet. * * Ported from docs/prototipos/home.html, section by section, as each part * of the theme lands (T3: header/nav/drawer/footer; T4+: hero and home * sections). Colors, fonts, radii and shadows come from the real design * tokens enqueued by ugel-core (assets/css/tokens.css) — this file never * redefines :root. The prototype's own unprefixed vars (--r8, --sh-s, ...) * do not exist here; they map to --ugel-r8, --ugel-shadow-s, etc. * The "Prototipo" badge is prototype-only chrome and does not ship here. */ /*────────────────────────────────────────────── BASE / RESET — shared by every section ──────────────────────────────────────────────*/ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--ugel-font-sans); background: var(--ugel-sand); color: var(--ugel-text); overflow-x: hidden; line-height: 1.6; } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; border: none; background: none; } img { max-width: 100%; display: block; } .wrap { max-width: 1280px; margin: auto; padding: 0 1.5rem; } /* WP core utility: visually hidden but available to assistive tech */ .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /*──── SCROLL REVEAL (T9, ported from docs/prototipos/home.html) ──── `.rv` marks reveal targets (section headers, cards/grids — see each template-part). The hidden/transition state below is gated behind `.js-reveal` on , added by theme.js right before it starts observing — a progressive-enhancement guard: if JS is disabled/blocked or the script fails, `.rv` elements are never targeted by this rule at all, so nothing can end up permanently invisible. theme.js also has its own fallback for browsers without IntersectionObserver (reveals everything immediately instead of observing). */ .js-reveal .rv { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; } .js-reveal .rv.in { opacity: 1; transform: none; } /* prefers-reduced-motion: reduce — neutralize the hidden state and the transition entirely in CSS (not just in theme.js) so content is visible without waiting on any script timing, matching the media feature already respected by ugel-core/assets/js/slider.js (autoplay disabled). */ @media (prefers-reduced-motion: reduce) { .js-reveal .rv { opacity: 1; transform: none; transition: none; } } /*──── TOPBAR ────*/ .topbar { background: var(--ugel-ink); padding: .4rem 0; font-size: .69rem; color: rgba(255, 255, 255, .62); } .topbar-inner { max-width: 1280px; margin: auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .topbar-links { display: flex; gap: 1.25rem; flex-wrap: wrap; } .topbar-links a:hover { color: var(--ugel-gold-light); } /* Feature 013, T2 — el emoji sizeaba con el font-size del topbar (.69rem); el `.ugel-icon` swap queda 1em (no el 1.15em default de icons.css) para no verse sobredimensionado junto al texto tan chico de la topbar. */ .topbar-links a .ugel-icon, .topbar-right span .ugel-icon { inline-size: 1em; block-size: 1em; vertical-align: -0.15em; } .topbar-right { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; } .t-socials { display: flex; gap: .3rem; } .t-socials a { width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; font-size: .62rem; transition: all .15s; } /* Feature 013, T2 — Facebook/YouTube dentro del badge de 22px; tamaño fijo en vez del 1.15em relativo (el `` ya no tiene texto, solo el ícono). */ .t-socials a .ugel-icon { inline-size: 14px; block-size: 14px; vertical-align: 0; } .t-socials a:hover { background: var(--ugel-gold); border-color: var(--ugel-gold); color: #fff; } /*──── HEADER / NAV ────*/ /* Scoped to `body > header` (the site header only). A bare `header {}` tag selector also matched the inner content `
`s (`.ugel-archive__header`, `.ugel-single__header`, `.ugel-page__header`, `.ugel-404`'s wrapper…), giving each of them this sticky / white / z-index:500 chrome. On archive pages that made `.ugel-archive__header` a z-index:500 stacking context LATER in the DOM than the site header (also z-index:500), so it painted OVER the nav dropdown — the "white card covering the submenu" bug (found via Playwright, 012 review). */ body > header { background: var(--ugel-white); border-bottom: 1px solid var(--ugel-border); position: sticky; top: 0; z-index: 500; box-shadow: var(--ugel-shadow-s); } .header-inner { max-width: 1280px; margin: auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 1rem; } .logo { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; } /* Official seal (replaces the placeholder shield, 2026-07-28). No background box: the seal is its own artwork. width/height live in the markup too, so the browser reserves the space before the image loads (no CLS). */ .logo-img { width: 46px; height: 46px; flex-shrink: 0; object-fit: contain; } .logo-text .lt-main { /* Marca chica en la familia de CUERPO: Archivo Black sería demasiado peso para el logo del header (019, D-C). Ajustable en la revisión visual. */ font-family: var(--ugel-font-sans); font-weight: var(--ugel-fw-semibold); font-size: 1rem; color: var(--ugel-ink); line-height: 1.1; /* Mayúsculas por PRESENTACIÓN (Adolfo, 2026-07-28), nunca en el dato: blogname sigue siendo "UGEL Parinacochas" porque alimenta también el y el name del JSON-LD (020), donde el all-caps es ruido. El tracking leve compensa la legibilidad que las mayúsculas corridas pierden. */ text-transform: uppercase; letter-spacing: .04em; } .logo-text .lt-sub { font-size: .59rem; color: var(--ugel-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .09em; } /* Desktop nav: driven by wp_nav_menu('primary'), or ugel_theme_nav_fallback() when no menu is assigned. WP's own classes (menu-item-has-children, sub-menu, current-menu-item) are targeted directly instead of the prototype's synthetic .nav-item/.dropdown classes, which required a custom Walker with no visual benefit. */ .nav-desktop { display: flex; } .nav-desktop-list { display: flex; align-items: center; gap: .1rem; list-style: none; } .nav-desktop-list > li { position: relative; } .nav-desktop-list > li > a { display: flex; align-items: center; gap: .22rem; font-size: .79rem; font-weight: 600; color: var(--ugel-text); padding: .4rem .72rem; border-radius: var(--ugel-r8); transition: all .15s; white-space: nowrap; } .nav-desktop-list > li > a:hover, .nav-desktop-list > li.current-menu-item > a { color: var(--ugel-blue); background: rgba(20, 97, 170, .06); } .nav-desktop-list > li.menu-item-has-children > a::after { content: '▾'; font-size: .55rem; opacity: .55; margin-left: .22rem; transition: transform .2s; } .nav-desktop-list > li.menu-item-has-children:hover > a::after, .nav-desktop-list > li.menu-item-has-children:focus-within > a::after { transform: rotate(180deg); } .nav-desktop-list .sub-menu { position: absolute; top: calc(100% + 6px); left: 0; background: var(--ugel-white); border: 1px solid var(--ugel-border); border-radius: var(--ugel-r12); box-shadow: var(--ugel-shadow-l); min-width: 220px; padding: .5rem; list-style: none; display: none; z-index: 600; } .nav-desktop-list > li:hover > .sub-menu, .nav-desktop-list > li:focus-within > .sub-menu { display: block; } .nav-desktop-list .sub-menu a { display: flex; align-items: center; padding: .6rem .9rem; border-radius: var(--ugel-r8); font-size: .79rem; font-weight: 500; color: var(--ugel-text); transition: all .15s; } .nav-desktop-list .sub-menu a:hover { background: var(--ugel-sand); color: var(--ugel-blue); } .nav-actions { display: flex; align-items: center; gap: .65rem; } .btn-primary { background: var(--ugel-gold-deep); color: var(--ugel-white); padding: .45rem 1.2rem; border-radius: var(--ugel-r8); font-size: .78rem; font-weight: 700; transition: background .15s; white-space: nowrap; } .btn-primary:hover { background: var(--ugel-gold); } /* Feature 013, T2 — alinea el ícono de "Mesa de Partes" con el texto del botón (antes 📥 sizeaba con el font-size del botón; misma idea en .md-btn más abajo, para el drawer móvil). */ .btn-primary .ugel-icon, .md-btn .ugel-icon { vertical-align: -0.14em; } .hamburger { display: none; flex-direction: column; gap: 5px; width: 38px; height: 38px; padding: 9px; border: 1px solid var(--ugel-border); border-radius: var(--ugel-r8); background: var(--ugel-white); } .hamburger span { width: 100%; height: 2px; background: var(--ugel-ink); border-radius: 2px; transition: all .28s cubic-bezier(.4, 0, .2, 1); display: block; } .hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /*──── MOBILE DRAWER ────*/ .mobile-drawer { position: fixed; inset: 0; z-index: 490; background: var(--ugel-white); transform: translateX(100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1); overflow-y: auto; padding: 80px 0 2rem; } .mobile-drawer.is-open { transform: translateX(0); } .md-section { padding: 0 1.25rem 1rem; } .md-section + .md-section { border-top: 1px solid var(--ugel-border); padding-top: 1rem; } .md-section-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ugel-muted); margin-bottom: .6rem; padding-left: .25rem; } .md-nav-list { list-style: none; } .md-nav-list a { display: flex; align-items: center; gap: .85rem; padding: .75rem 1rem; border-radius: var(--ugel-r12); font-size: .9rem; font-weight: 600; color: var(--ugel-text); transition: all .15s; } .md-nav-list a:hover { background: var(--ugel-sand); color: var(--ugel-blue); } .md-nav-list .sub-menu { list-style: none; padding-left: 1rem; } .md-actions { padding: 1.25rem; display: flex; flex-direction: column; gap: .65rem; border-top: 1px solid var(--ugel-border); margin-top: .5rem; } .md-btn { display: block; text-align: center; padding: .85rem 1rem; border-radius: var(--ugel-r12); font-size: .9rem; font-weight: 700; } .md-btn.primary { background: var(--ugel-gold-deep); color: #fff; } .md-btn.outline { border: 1.5px solid var(--ugel-border); color: var(--ugel-text); } /*──── FOOTER ────*/ footer { background: #080f1b; } .footer-main { max-width: 1280px; margin: auto; padding: 2.5rem 1.5rem 2rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; } .fb-logo { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; } .fb-badge { width: 38px; height: 38px; border-radius: 8px; background: var(--ugel-ink-soft); display: flex; align-items: center; justify-content: center; font-size: .95rem; /* Feature 013, T2 — el emoji 🏛️ se pintaba con su propio color; el `.ugel-icon` swap hereda por currentColor, así que sin esto el trazo tomaría el color de texto del body (--ugel-text, oscuro) e desaparecería sobre el fondo oscuro --ugel-ink-soft. */ color: var(--ugel-white); } .fb-badge .ugel-icon { inline-size: 20px; block-size: 20px; vertical-align: 0; } .fb-name { color: #fff; /* Marca chica en la familia de CUERPO — mismo criterio que .lt-main (019, D-C). */ font-family: var(--ugel-font-sans); font-weight: var(--ugel-fw-semibold); font-size: .95rem; } .fb-sub { color: rgba(255, 255, 255, .62); font-size: .59rem; text-transform: uppercase; letter-spacing: .08em; } .footer-brand p { font-size: .75rem; color: rgba(255, 255, 255, .62); line-height: 1.78; max-width: 250px; } .footer-col h4 { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .7); margin-bottom: .85rem; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .42rem; } .footer-col a { color: rgba(255, 255, 255, .62); font-size: .76rem; transition: color .15s; } .footer-col a:hover { color: var(--ugel-gold-light); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .04); } .fb-bottom-inner { max-width: 1280px; margin: auto; padding: 1.1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .fb-bottom-inner p { font-size: .66rem; color: rgba(255, 255, 255, .55); } /*──── HERO COMBINADO (fondo = [ugel_slider] real vía Slick, texto fijo + velo) ────*/ .hero { position: relative; overflow: hidden; background: var(--ugel-ink); min-height: 460px; display: flex; align-items: center; } /* Fallback (spec acceptance criterion): SliderCarrusel::render() returns '' when the `slider` CPT has no active slides — `.hero-slides` is not even rendered (see template-parts/home/hero.php) and this flat gradient takes its place. Text stays legible in both cases. */ .hero.hero--fallback { background: linear-gradient(135deg, var(--ugel-ink) 0%, var(--ugel-ink-soft) 55%, var(--ugel-blue) 100%); } .hero-slides { position: absolute; inset: 0; z-index: 0; } /* Plan "envolver, no tocar": adapt the plugin's real `.ugel-slider` markup (Slick) into a full-bleed cover background by scoped CSS only — the component/template themselves are untouched. `height: 100%` here (not just `inset: 0`) is load-bearing, not redundant: `inset` only sets top/right/bottom/left, so this box's `height` *property* stays computed as `auto` even though it renders at a definite pixel height via the abspos top+bottom algorithm. Descendant percentage heights (`.slick-list`, `.slick-track` below) only resolve against an ancestor whose `height` *property* is itself a specified length/percentage, not merely a resolved used value — without this line, the whole `height: 100%` chain below silently falls back to each image's natural aspect-ratio height (verified: was rendering ~2845px tall inside a 460px hero before this fix). */ .hero .ugel-slider { position: absolute; inset: 0; height: 100%; } /* Slick sizes `.slick-list`/`.slick-track` from content height (its own CSS does not set an explicit height on them); without this override the track collapses to `aspect-ratio: 24/9` instead of filling the hero. `.slick-slide` itself then gets `height:100%` "for free" from slick.min.css once `.slick-track` has a specified (non-auto) height. */ .hero .ugel-slider .slick-list, .hero .ugel-slider .slick-track { height: 100%; } /* Verified in-browser (DevTools DOM inspection) that Slick 1.8.1 wraps the plugin's own markup in TWO extra layers, not zero as assumed at first: .slick-slide (Slick's own div, height:100% from vendor CSS — see above) > <div> (unnamed Slick wrapper, no class) > .ugel-slider__slide (the plugin's real markup; already `position: relative` in the plugin's own slider.css, but no explicit height anywhere) > a.ugel-slider__link (or a bare img when the slide has no link) > img.ugel-slider__img Neither of the two inner levels has an explicit height, so the `height: 100%` chain silently died there and every image fell back to its own intrinsic aspect-ratio height instead of the hero's 460px (first observed at ~2845px for a portrait-oriented seed image). These two rules close that gap; `.ugel-slider__link`/`__img` can then be positioned absolutely against `.ugel-slider__slide` (already the nearest positioned ancestor, per the plugin's own CSS) exactly like `.hero-slides`/`.ugel-slider` are positioned against `.hero` above. */ .hero .ugel-slider .slick-slide > div, .hero .ugel-slider__slide { height: 100%; } .hero .ugel-slider__link { position: absolute; inset: 0; pointer-events: none; } .hero .ugel-slider__img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; aspect-ratio: auto; } /* Arrows stay hidden in the hero (they'd compete with `.hero-inner`), but the DOTS came back by Adolfo's request (2026-07-28): they give the rotating background a visible position indicator and a keyboard/click target. Restyled from scratch instead of un-hiding slick-theme's default: that one paints the dot through a `:before` glyph of the slick webfont, and the vendored slick package never shipped its fonts (aprendizaje 2026-07-17) — un-hiding it would show nothing. Painting the BUTTON itself needs no font. Stack: slides z-0 · veil z-1 · content z-2 → dots z-3, inside the hero (slick-theme's default `bottom: -25px` pushed them under the quickband). */ .hero .slick-prev, .hero .slick-next { display: none; } .hero .slick-dots { position: absolute; bottom: 16px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; } .hero .slick-dots li { margin: 0; width: auto; height: auto; } .hero .slick-dots li button { display: block; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; font-size: 0; line-height: 0; background: rgba(255, 255, 255, .45); cursor: pointer; transition: background .2s ease, transform .2s ease; } .hero .slick-dots li button:hover { background: rgba(255, 255, 255, .75); } .hero .slick-dots li.slick-active button { background: var(--ugel-gold-light); transform: scale(1.2); } .hero .slick-dots li button:focus-visible { outline: 2px solid var(--ugel-gold-light); outline-offset: 3px; } .hero-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14, 26, 43, .94), rgba(14, 26, 43, .6) 55%, rgba(14, 26, 43, .25)); /* Swipe/drag del slider (pedido de Adolfo, 2026-07-28): el velo es pura decoración pero, al cubrir todo el hero por ENCIMA del slider (z-1 vs z-0), se tragaba cada gesto de mouse/touch — slick trae draggable/swipe activados de fábrica y nunca le llegaba nada. Dejarlo pasar los eventos es lo que habilita deslizar. */ pointer-events: none; } .hero-veil::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 92% 15%, rgba(20, 97, 170, .35), transparent 60%); } /* El contenedor de contenido también deja pasar los gestos (pointer-events none) y SOLO lo interactivo real los recaptura (auto): así se puede deslizar el slider arrancando desde el texto del titular o los huecos, mientras el buscador y cualquier enlace siguen perfectamente clickeables. Trade-off asumido: el texto del hero deja de ser seleccionable — en un titular decorativo pesa menos que poder deslizar. Los dots (z-3, fuera de este contenedor) no se ven afectados. */ .hero-inner { position: relative; z-index: 2; width: 100%; padding: 3rem 0; pointer-events: none; } .hero-inner a, .hero-inner button, .hero-inner input, .hero-inner select, .hero-inner form { pointer-events: auto; } /* Affordance: sobre las zonas deslizables el cursor lo dice. */ .hero-slides { cursor: grab; } .hero-slides:active { cursor: grabbing; } /* Scoped to the h1 since the 020: the pill moved inside the heading (it now carries the brand, not a slogan). `display: flex` + `width: fit-content` instead of the old `inline-flex`: a flex span breaks onto its own line above the headline text — inline-flex would let the headline run on beside it. The explicit font-family/size shields it from inheriting the h1's display face and clamp() size. */ .hero h1 .hero-pill { display: flex; width: fit-content; align-items: center; gap: .5rem; background: rgba(192, 124, 26, .18); border: 1px solid rgba(192, 124, 26, .4); color: var(--ugel-gold-light); font-family: var(--ugel-font-sans); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; line-height: 1.4; padding: .3rem .8rem; border-radius: 20px; margin-bottom: 1.25rem; } .hero-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ugel-theme-blink 2s ease infinite; } @keyframes ugel-theme-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .hero h1 { font-family: var(--ugel-font-display); font-size: clamp(2rem, 4.5vw, 3.2rem); color: #fff; font-weight: var(--ugel-fw-heading); line-height: 1.16; letter-spacing: -.03em; margin-bottom: .9rem; max-width: 640px; } /* Único uso de la familia script en todo el sitio (019, criterio 3). El acento del hero quedó sin tratamiento propio cuando la 011 le sacó la itálica; acá recupera identidad sin tocar ninguna superficie funcional. El dorado se conserva. */ .hero h1 em { font-family: var(--ugel-font-script); font-style: normal; /* Peso explícito: Sacramento tiene una sola cara, y heredar un bold del h1 produciría bold sintetizado (glifos embarrados). */ font-weight: var(--ugel-fw-regular); /* Adolfo pidió el acento más pesado (2026-07-28). Como no existe una cara bold real, el engrose se hace con un trazo centrado del mismo color: espesa la script monolínea de forma uniforme y sin deformar los glifos — lo que un bold sintetizado no puede. Progressive enhancement: sin soporte de text-stroke queda el trazo fino original. Si algún día se quiere aún más peso, la salida correcta es el swap a Kaushan Script (naturalmente más gruesa) documentado en tokens.css, no subir este valor sin límite. */ -webkit-text-stroke: 0.03em currentColor; /* Las scripts corren ópticamente más chicas que una grotesca al mismo font-size; el bump las devuelve a la línea del resto del titular. */ font-size: 1.25em; color: var(--ugel-gold-light); } .hero-desc { font-size: 1rem; color: rgba(255, 255, 255, .72); line-height: 1.7; margin-bottom: 1.8rem; max-width: 500px; } /* Post-018 iteration (approved by Adolfo): the general search (`?s=` → search.php, no `post_type` restriction) moved back up into the hero as `.hero-search`, right below `.hero-desc` — white rounded card matching the tokens already used for cards elsewhere (`--ugel-white`, `--ugel-r12`, `--ugel-shadow-m`). `max-width` keeps it from stretching full-bleed next to the wide `.hero h1`/`.hero-desc` measure above it. Responsive: base/desktop is ONE row (input + button side by side, input growing via `flex: 1`); `@media (max-width: 580px)` below (same mobile breakpoint already used for `.hero`/`.hero-veil`) stacks it back to a column, button full-width, matching the quickband card's former layout. */ .hero-search { display: flex; flex-direction: row; max-width: 560px; background: var(--ugel-white); border-radius: var(--ugel-r12); overflow: hidden; box-shadow: var(--ugel-shadow-m); } .hero-search input { border: none; flex: 1; min-width: 0; padding: 1.05rem 1.25rem; font-size: .95rem; font-family: inherit; outline: none; color: var(--ugel-text); } /* `--ugel-muted` es el token ya auditado AA sobre blanco/arena (tokens.css, auditoría 012) — se reusa acá para el placeholder en vez del gris por default del user-agent, que no está garantizado AA. */ .hero-search input::placeholder { color: var(--ugel-muted); } /* Foco de teclado visible sobre el contenedor (el input no tiene borde propio): mismo token/patrón de foco ya establecido para contraste AA sobre fondos oscuros (`.qa:focus-visible` más abajo). */ .hero-search:focus-within { outline: 3px solid var(--ugel-gold-light); outline-offset: 2px; } .hero-search button { border: none; flex-shrink: 0; padding: 0 1.5rem; background: var(--ugel-gold-deep); color: var(--ugel-white); font-size: .95rem; font-weight: 700; transition: background .2s; } .hero-search button:hover { background: var(--ugel-gold); } /*──── QUICKBAND (template-parts/home/quickband.php) — dark band right below the hero, holding `.quick-actions`/`.qa`: 6 quick-access card tiles (icon + label), one per destination. Replaces the previous "Popular en UGEL Parinacochas" text-link list (018/T3) — the mockup has no heading here, just the tiles. Sits on the deep-teal gradient (Adolfo's reference, 2026-07-28; stops sampled from the image, defined in tokens.css), with `--ugel-ink-soft` kept as the solid fallback for any engine that drops the gradient var. Icon/label colors keep reusing the palette established for dark backgrounds (`--ugel-gold-light`, see `.link-all.light`/ `.sec-eyebrow.light`, T7): contrast re-audited against the gradient's BRIGHTEST stop (#024a62, the worst case) — gold-light 5.8:1, white 9.7:1, both AA. `--ugel-blue` still fails on any of these darks; never use it here. */ .quickband { background: var(--ugel-ink-soft); background: var(--ugel-grad-deep); padding: 3rem 0; } /* Quick-access card tiles: 3 columns on desktop (base rule, this file is desktop-first — see docs/aprendizajes.md, 2026-07-17), 2 on mobile/tablet (`@media (max-width: 860px)` below, same breakpoint the old `.popular__list` used for its own 3→2 switch). */ .quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } /* Card background/border: translucent white over the dark band, same pattern this file already uses for cards on `bg-ink` (`#integridad .ugel-ultimos-contrataciones`, `rgba(255, 255, 255, .05)`/`.1`) — no new hex, just rgba of white. */ .qa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1.35rem 1rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--ugel-r12); text-align: center; transition: background .15s, border-color .15s, transform .15s; } .qa:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); transform: translateY(-2px); } .qa:focus-visible { outline: 2px solid var(--ugel-gold-light); outline-offset: 3px; } /* Ícono AA sobre `--ugel-ink-soft`: `--ugel-gold-light` dio ~7.94:1 en la auditoría de 018/T3 (ver comentario de `.quickband` arriba); `--ugel-blue` falla con ~2.1:1 — nunca blue sobre este fondo. */ .qa-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--ugel-gold-light); } .qa-ico .ugel-icon { inline-size: 1.75rem; block-size: 1.75rem; } .qa-label { font-size: var(--ugel-fs-sm); font-weight: var(--ugel-fw-medium); color: var(--ugel-white); } /*──── HOME SECTION CHROME (shared by every `.section` on the home — eyebrow + title + optional "Ver todas"-style link. Introduced here by T6, the first home section past the quickband; `.bg-sand`/`.bg-ink` and the `.light` eyebrow/title/link variants for dark sections land here in T7, the first home section that needs them (Integridad, dark background)) ────*/ .section { padding: 3.5rem 0; } .bg-white { background: var(--ugel-white); } .bg-sand { background: var(--ugel-sand); } /* Same deep-teal gradient as the quickband (Adolfo, 2026-07-28) so the two dark bands of the home read as one system. Solid ink stays as fallback. Contrast on the BRIGHTEST stop (#024a62): the only elements sitting directly on this background are .sec-eyebrow.light/.link-all.light (gold-light, 5.8:1) and .sec-title.light (white, 9.7:1) — AA. The inner cards carry their own solid backgrounds and are unaffected. */ .bg-ink { background: var(--ugel-ink); background: var(--ugel-grad-deep); } .sec-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap; } .sec-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--ugel-blue); margin-bottom: .35rem; } .sec-eyebrow::before { content: ''; width: 16px; height: 2.5px; background: var(--ugel-gold); border-radius: 2px; } /* Dark-section variant (Integridad, T7): gold eyebrow → gold-light, ink title → white, blue link → gold-light. Applied alongside the base class (`sec-eyebrow light`, not instead of it) so only color changes. */ .sec-eyebrow.light { color: var(--ugel-gold-light); } .sec-eyebrow.light::before { background: var(--ugel-gold-light); } .sec-title { font-family: var(--ugel-font-display); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ugel-ink); font-weight: var(--ugel-fw-heading); line-height: 1.2; letter-spacing: -.02em; } .sec-title.light { color: var(--ugel-white); } .link-all { display: flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--ugel-blue); white-space: nowrap; } .link-all:hover { color: var(--ugel-ink); } .link-all.light { color: var(--ugel-gold-light); } .link-all.light:hover { color: var(--ugel-white); } /*──── CONVOCATORIAS (dynamic, ugel_ultimos_contrataciones(), T6, template-parts/home/convocatorias.php) ────*/ /* CSS-first over the component's real `vista=lista` markup (plan.md, "Secciones del home") — not a theme override. `ultimos-contrataciones.css` (ugel-core) already ships a solid, responsive 2-column row-list design for `--lista` (icon + title/meta + download, collapsing to 1 column at <=600px, with its own tablet/mobile tokens). Forcing that into the prototype's literal 3-column badge card grid would mean fighting nearly every rule the component's own CSS sets for `--lista` (grid-template- columns, row separators, responsive tokens) for a purely cosmetic match. Restyling the *container* into a bounded card instead reuses the same visual language the prototype's cards share with the rest of the site (white background, border, radius, shadow) without touching the component's template or duplicating its responsive logic. */ #convocatorias .ugel-ultimos-contrataciones { max-width: none; margin: 0; padding: 1.5rem 1.75rem; background: var(--ugel-white); border: 1px solid var(--ugel-border); border-radius: var(--ugel-r16); box-shadow: var(--ugel-shadow-s); } /* The component's own `--lista` hover (`background: var(--ugel-white)`) is a no-op once the container itself is white — restyle it to the section's sand tone so row hover stays visible inside the card. */ #convocatorias .ugel-ultimos-contrataciones--lista .ugel-ultimos-contrataciones__card:hover { background: var(--ugel-sand); } /* The component always renders WP's `paginate_links()` once the query has more than one page (223 Contrataciones posts / 4 per preview = 56 pages) — there is no template-tag flag to suppress it. The spec's preview->listado pattern is explicitly "few items + Ver todas, NO pagination" (plan.md), so it is hidden here rather than piping a new arg through the plugin for a single preview use case. */ #convocatorias .ugel-ultimos-contrataciones__pagination { display: none; } /*──── DOCUMENTOS (dynamic, ugel_documento_tabla(), T7, template-parts/home/documentos.php) ────*/ /* Tabs are real links to each CPT's own archive (template-parts/home/ documentos.php resolves them via get_post_type_archive_link()), not a client-side filter — DocumentoTabla has none, and adding one is out of scope for this task. Visual only: active = the type the table below is currently showing. */ #documentos .doc-tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; } #documentos .doc-tab { padding: .5rem 1.1rem; border-radius: var(--ugel-r12); font-weight: 600; font-size: .8rem; background: var(--ugel-white); border: 1px solid var(--ugel-border); transition: all .15s; } #documentos .doc-tab:hover { border-color: var(--ugel-ink); color: var(--ugel-ink); } #documentos .doc-tab.active { background: var(--ugel-ink); color: var(--ugel-white); border-color: var(--ugel-ink); } /* `DocumentoTabla` renders a plain `<table>` (documento-tabla.php, ugel-core) with no `table-layout: fixed` — real titles wrap inside their cell instead of forcing horizontal growth (verified against live titles in the clone, e.g. "RESOLUCION MINESTERIAL_085-2025-MINEDU ESTRATEGIA «ABRAZA TU COLE»"). This wrapper is defensive insurance per the spec's no-horizontal- page-scroll criterion: if a future edge case (a single unbroken long token) ever forces the table wider than its column, it scrolls inside this box instead of the page. */ #documentos .doc-table-wrap { overflow-x: auto; } /*──── INTEGRIDAD (dynamic, ugel_ultimos_integridad(), T7, template-parts/home/integridad.php) ────*/ /* Same CSS-first choice as Convocatorias (T6): the real `vista=lista` markup (ultimos-contrataciones.css, ugel-core) is restyled, not overridden via a theme template. The only difference from Convocatorias' restyle is the palette — this section sits on `bg-ink`, so every color the component's own CSS ships (white card, ink title/border) is repainted translucent-white-on-dark instead of removed. */ #integridad .ugel-ultimos-contrataciones { max-width: none; margin: 0; padding: 1.5rem 1.75rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--ugel-r16); } #integridad .ugel-ultimos-contrataciones--lista .ugel-ultimos-contrataciones__card:hover { background: rgba(255, 255, 255, .08); } /* Row separators: the component's default `border-top: 1px solid var(--ugel-border)` (a light tan line) is barely visible on `bg-ink`; repainted translucent white instead. Same two selectors the component itself uses (2-col desktop/tablet vs 1-col mobile — ultimos- contrataciones.css lines ~270 and ~454), just a different color. */ #integridad .ugel-ultimos-contrataciones--lista .ugel-ultimos-contrataciones__card:not(:nth-child(-n+2)) { border-top: 1px solid rgba(255, 255, 255, .12); } #integridad .ugel-ultimos-contrataciones__icon, #integridad .ugel-ultimos-contrataciones__image { background: rgba(255, 255, 255, .08); } #integridad .ugel-ultimos-contrataciones__title, #integridad .ugel-ultimos-contrataciones__title a { color: var(--ugel-white); } #integridad .ugel-ultimos-contrataciones__title a:hover { color: var(--ugel-gold-light); } #integridad .ugel-ultimos-contrataciones__meta { color: rgba(255, 255, 255, .5); } #integridad .ugel-ultimos-contrataciones__download { color: var(--ugel-gold-light); } #integridad .ugel-ultimos-contrataciones__download:hover { background: rgba(255, 255, 255, .08); color: var(--ugel-white); } /* Same reasoning as Convocatorias (T6): the component always renders `paginate_links()` past one page, with no template-tag flag to suppress it; the spec's preview→listado pattern (few items + "Ver más", NO pagination) is enforced here by CSS, not by piping a new arg through the plugin for a single preview use case. */ #integridad .ugel-ultimos-contrataciones__pagination { display: none; } /*──── INSTITUCIÓN (static, T8, template-parts/home/institucion.php) ────*/ .inst-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } .mision-card { background: var(--ugel-sand-soft); border-radius: var(--ugel-r12); padding: 1.5rem; border-left: 4px solid var(--ugel-ink); } .mc-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ugel-gold-deep); /* WCAG AA sobre fondo claro, feature 004 T10 */ margin-bottom: .4rem; } .mision-card p { font-size: .85rem; color: var(--ugel-text); line-height: 1.8; font-style: italic; } .inst-links { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; } .inst-links a { background: var(--ugel-white); border: 1px solid var(--ugel-border); padding: .6rem 1rem; border-radius: var(--ugel-r8); font-size: .8rem; font-weight: 600; transition: all .15s; } .inst-links a:hover { border-color: var(--ugel-blue); color: var(--ugel-blue); } .inst-side-label { font-size: .75rem; color: var(--ugel-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 1rem; } /* Jurisdiction stat tiles: the prototype reuses `.areas-grid`/`.area-card` with an inline `style="grid-template-columns:1fr 1fr"` override; these dedicated classes avoid inline styles (none exist elsewhere in this theme) and stay a fixed 2-column grid at every breakpoint, same as the prototype's inline override effectively did (higher specificity than `.areas-grid`'s own responsive rules). */ .inst-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; } .inst-stat { background: var(--ugel-white); border: 1px solid var(--ugel-border); border-radius: var(--ugel-r16); padding: 1.35rem; text-align: center; } .inst-stat-ico { font-size: 1.6rem; } /* Feature 013, T3 — mismo criterio que `.qa-ico`: el emoji sizeaba con el font-size de `.inst-stat-ico` (1.6rem); el `.ugel-icon` swap queda 1em. `.inst-stat` es una card blanca sin `color` propio — el ícono hereda `--ugel-text` (body) sobre fondo blanco, mismo contraste que cualquier otro texto de la card, sin agregar color nuevo. */ .inst-stat-ico .ugel-icon { inline-size: 1em; block-size: 1em; vertical-align: 0; } .inst-stat-value { font-family: var(--ugel-font-display); font-weight: var(--ugel-fw-heading); font-size: 1.4rem; color: var(--ugel-blue); } .inst-stat-label { font-size: .72rem; color: var(--ugel-muted); } /*──── ÁREAS (T8, template-parts/home/areas.php; T6/008: 5 classification cards instead of 4, so the base rule is auto-fit instead of a fixed 4-column grid — still capped/overridden by the two media queries below at narrower widths) ────*/ .areas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; } .area-card { background: var(--ugel-white); border: 1px solid var(--ugel-border); border-radius: var(--ugel-r16); padding: 1.35rem; transition: all .15s; } .area-card:hover { box-shadow: var(--ugel-shadow-m); transform: translateY(-2px); } .area-header { font-weight: 700; font-size: .85rem; color: var(--ugel-ink); border-bottom: 1px solid var(--ugel-border); padding-bottom: .5rem; margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; } .area-list { list-style: none; display: flex; flex-direction: column; gap: .35rem; } .area-list li { font-size: .75rem; color: var(--ugel-text); padding: .2rem 0; display: flex; align-items: center; gap: .3rem; } .area-list li::before { content: '›'; color: var(--ugel-blue); font-weight: 700; } /*──── PRENSA (dynamic, ugel_noticia_grid(), T8, template-parts/home/prensa.php) ────*/ /* The real component (NoticiaGrid/NoticiaCard, ugel-core/assets/css/ components/noticia-grid.css + noticia-card.css) already matches the prototype's `.news-grid`/`.news-card` shape closely (thumb + date badge + title, same tokens) — no card-level override needed, unlike Convocatorias/Integridad's `--lista` restyle. The only adjustment is neutralizing the component's own `max-width/margin/padding` (meant for standalone use), which would otherwise double up inside this section's `.wrap`. */ #prensa .ugel-noticia-grid { max-width: none; margin: 0; padding: 0; } /*──── AYUDA (static, T8, template-parts/home/ayuda.php) ────*/ .help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .help-card { display: flex; align-items: center; gap: 1.25rem; background: var(--ugel-white); border: 1px solid var(--ugel-border); border-radius: var(--ugel-r12); padding: 1.25rem; transition: all .15s; } .help-card:hover { box-shadow: var(--ugel-shadow-s); border-color: var(--ugel-blue); } .h-ico { font-size: 1.8rem; flex-shrink: 0; } /* Feature 013, T3 — mismo criterio que `.qa-ico`/`.inst-stat-ico`: el emoji sizeaba con el font-size de `.h-ico` (1.8rem); el `.ugel-icon` swap queda 1em. `.help-card` es blanca (`background: var(--ugel-white)`) sin `color` propio — el ícono hereda `--ugel-text` (body), mismo contraste que `.h-name`/`.h-desc`, sin agregar color nuevo. */ .h-ico .ugel-icon { inline-size: 1em; block-size: 1em; vertical-align: 0; } .h-name { font-weight: 700; font-size: .9rem; color: var(--ugel-ink); margin-bottom: .15rem; } .h-desc { font-size: .75rem; color: var(--ugel-muted); } /*──── ARCHIVE / TERM-ARCHIVE LISTING (feature 004, T2 — archive-{contratacion,documento,integridad}.php, taxonomy- {contratacion_tipo,documento_tipo,integridad_tipo}.php, both via template-parts/archive-listing.php). Container chrome only: each row's own markup/CSS ships with ugel-core's `ListingRow` Component (listing-row.css, T1) — this block never restyles `.ugel-listing-row` itself. ────*/ .ugel-archive { padding: 3.5rem 0 4.5rem; } .ugel-archive__header { margin-bottom: 2rem; } .ugel-archive__title { font-family: var(--ugel-font-display); font-size: var(--ugel-fs-3xl); color: var(--ugel-ink); font-weight: var(--ugel-fw-heading); line-height: 1.2; letter-spacing: -.02em; } .ugel-archive__count { margin-top: .5rem; font-size: var(--ugel-fs-sm); color: var(--ugel-muted); } /* Feature 017, T8 — wraps the result count and the "Ordenar por" control (`ugel_convocatorias_orden()`, ugel-core) on the same line (spec.md C7, "junto al contador de resultados"). `''` outside the contratacion context, so this row degrades to just the count on documento/integridad/search. Feature 017 follow-up (second layout adjustment): moved out of `<header>` to sit right above `.ugel-archive__list` (archive-listing.php) — `margin-bottom` here is what now separates it from the list card, the same spacing value `.ugel-archive__header`/`.ugel-convocatorias- filters` already use between their own blocks. */ .ugel-archive__count-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.5rem; } .ugel-archive__count-row .ugel-archive__count { margin-top: 0; } /* Feature 012, T2 — header presentation: hardcoded archetype intro (`ugel_archive_intro()`) on the 3 base archives, native term description (`term_description()`) on term-archives. Body copy, not UI chrome: DM Sans via `--ugel-font-sans` (same as the rest of the theme), a reading `max-width` so long institutional copy doesn't stretch full-bleed, and enough line-height for comfortable legibility. */ .ugel-archive__intro { margin-top: 1rem; max-width: 60ch; font-size: var(--ugel-fs-lg); line-height: 1.7; color: var(--ugel-text); } /* Term description: same reading measure as the intro, softer tone (`--ugel-muted`) since it is secondary/editorial copy under the term's own title (`the_archive_title()`), not the page's primary message. */ .ugel-archive__description { margin-top: 1rem; max-width: 60ch; font-size: var(--ugel-fs-md); line-height: 1.7; color: var(--ugel-muted); } .ugel-archive__description p + p { margin-top: .75rem; } .ugel-archive__list { background: var(--ugel-white); border: 1px solid var(--ugel-border); border-radius: var(--ugel-r16); box-shadow: var(--ugel-shadow-s); overflow: hidden; } .ugel-archive__empty { padding: 2rem; background: var(--ugel-white); border: 1px solid var(--ugel-border); border-radius: var(--ugel-r16); color: var(--ugel-muted); } .ugel-archive__pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1.5rem; } .ugel-archive__pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .6rem; border: 1px solid var(--ugel-border); border-radius: var(--ugel-r8); font-size: var(--ugel-fs-sm); font-weight: 600; color: var(--ugel-ink); background: var(--ugel-white); } .ugel-archive__pagination .page-numbers:hover { border-color: var(--ugel-blue); color: var(--ugel-blue); } .ugel-archive__pagination .page-numbers.current { background: var(--ugel-blue); border-color: var(--ugel-blue); color: var(--ugel-white); } .ugel-archive__pagination .page-numbers.dots { border-color: transparent; background: none; } /*──── SINGLE (feature 004, T3 — single-{contratacion,documento,integridad}.php, both via template-parts/single-content.php). Container chrome only: the ficha's own markup/CSS ships with ugel-core's `FichaMeta` Component (ficha-meta.css, T1) — this block never restyles `.ugel-ficha-meta` itself. ────*/ .ugel-single { padding: 3.5rem 0 4.5rem; } /* feature 016, T1 — single reading column. Wraps the whole <article> so header, ficha, download and body share ONE centered measure, instead of the header/ficha stretching to `.wrap` (~1280px) while the body was capped narrower and pinned left (see ugel-core's post-content.css). `font-size` here matches `.ugel-post-content`'s own so both compute `70ch` off the same basis (ch is relative to the element's font-size). */ .ugel-single__inner { max-width: 70ch; margin: auto; font-size: var(--ugel-fs-lg); } .ugel-single__header { margin-bottom: 2rem; } /* feature 016, T2 — masthead identity: eyebrow (tipo) + número (anchor) + título + fecha. Deliberately NO background here: the eyebrow chip used to share `--ugel-sand` with `.ugel-ficha-meta` right below it (ficha- meta.css), blurring the two together. A text-only uppercase label keeps the masthead visually separate from the ficha's sand box. */ .ugel-single__tipo { display: inline-block; margin-bottom: .5rem; color: var(--ugel-blue); font-size: var(--ugel-fs-sm); font-weight: var(--ugel-fw-bold); text-transform: uppercase; letter-spacing: .06em; } /* The número is the masthead's typographic anchor (plan.md B) — bumped up in size/weight and given its OWN accent color (gold, distinct from the eyebrow's blue and the ficha's ink) so it reads as a distinct identity marker, not another ficha field. `tabular-nums` keeps digit widths consistent (same reasoning as the archive listing date column, 015). */ .ugel-single__numero { display: block; margin-bottom: .35rem; color: var(--ugel-gold-deep); font-size: var(--ugel-fs-xl); /* Peso FIJO, no --ugel-fw-heading: esta regla usa la familia de CUERPO, no la de display, así que no puede seguir al alias de título (que desde la 019 vale 400 porque Archivo Black tiene un solo peso). Acá el bold sigue haciendo falta para que el número ancle el masthead. */ font-weight: var(--ugel-fw-bold); font-variant-numeric: tabular-nums; } .ugel-single__title { font-family: var(--ugel-font-display); font-size: var(--ugel-fs-3xl); color: var(--ugel-ink); font-weight: var(--ugel-fw-heading); line-height: 1.2; letter-spacing: -.02em; } .ugel-single__fecha { margin-top: .5rem; font-size: var(--ugel-fs-sm); color: var(--ugel-muted); } .ugel-single__content { margin-top: 1.5rem; } /* feature 016, T4 — "volver al listado" link at the foot of the single (`ugel_volver_al_listado()`, template-tags.php). Sits inside `.ugel-single__inner`, so it shares the same centered reading column as the rest of the single instead of a separately-aligned block. */ .ugel-single__back { display: inline-block; margin-top: 2.5rem; color: var(--ugel-blue); font-size: var(--ugel-fs-sm); font-weight: var(--ugel-fw-medium); text-decoration: none; } .ugel-single__back:hover { text-decoration: underline; } .ugel-single__back:focus-visible { outline: 2px solid var(--ugel-gold); outline-offset: 2px; border-radius: var(--ugel-r8); } /*──── PAGE (feature 004, T4 — page.php). Same shape as `.ugel-single` (header + content wrapper) minus the tipo/fecha meta Pages don't have. ────*/ .ugel-page { padding: 3.5rem 0 4.5rem; } .ugel-page__header { margin-bottom: 1.5rem; } .ugel-page__title { font-family: var(--ugel-font-display); font-size: var(--ugel-fs-3xl); color: var(--ugel-ink); font-weight: var(--ugel-fw-heading); line-height: 1.2; letter-spacing: -.02em; } .ugel-page__content { font-size: var(--ugel-fs-lg); color: var(--ugel-text); line-height: 1.7; } /*──── 404 (feature 004, T4 — 404.php). Useful navigation, not a dead end. ────*/ .ugel-404 { padding: 4.5rem 0 5.5rem; text-align: center; } .ugel-404__eyebrow { font-size: var(--ugel-fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ugel-blue); } .ugel-404__title { margin-top: .5rem; font-family: var(--ugel-font-display); font-size: var(--ugel-fs-3xl); color: var(--ugel-ink); font-weight: var(--ugel-fw-heading); line-height: 1.2; letter-spacing: -.02em; } .ugel-404__text { margin: 1rem auto 0; max-width: 42rem; color: var(--ugel-muted); font-size: var(--ugel-fs-lg); } .ugel-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; } .ugel-404__link { padding: .6rem 1.4rem; border: 1px solid var(--ugel-border); border-radius: var(--ugel-r8); background: var(--ugel-white); color: var(--ugel-blue); font-size: var(--ugel-fs-sm); font-weight: 600; box-shadow: var(--ugel-shadow-s); } .ugel-404__link:hover { border-color: var(--ugel-blue); } .ugel-404__link--home { background: var(--ugel-blue); border-color: var(--ugel-blue); color: var(--ugel-white); } .ugel-404__link--home:hover { background: var(--ugel-blue-soft); border-color: var(--ugel-blue-soft); } /*──── RESPONSIVE (header/nav/drawer/footer/hero/quickband/convocatorias/ documentos/integridad/institucion/areas/prensa/ayuda/archive) ────*/ @media (max-width: 1100px) { .areas-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .topbar, .nav-desktop, .btn-primary { display: none; } .hamburger { display: flex; } .inst-layout { grid-template-columns: 1fr; } .help-grid { grid-template-columns: 1fr; } .quick-actions { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .footer-main { grid-template-columns: 1fr; } .ugel-archive { padding: 2rem 0 3rem; } .ugel-archive__title { font-size: clamp(1.5rem, 6vw, var(--ugel-fs-3xl)); } .hero { min-height: 420px; } /* T9 finding: `.hero-veil` (base rule above) is a 90deg horizontal gradient tuned for the desktop composition, where `.hero-inner` sits in a fixed-width left column next to the visually "empty" right side of the slide. On mobile `.hero-inner` spans nearly the full viewport width instead (`.wrap` padding only), so the gradient's lighter right end (25% opacity) can land directly under the text — legibility then depends on which part of the slide image happens to be behind it. Switching to a vertical gradient at this breakpoint removes that positional dependency: darkness now follows the text block's own vertical position instead of the horizontal composition, so it holds regardless of the slide's left/right content. Verified over the brightest seeded slide (Playwright screenshot, see T9 report). */ .hero-veil { background: linear-gradient(180deg, rgba(14, 26, 43, .55) 0%, rgba(14, 26, 43, .88) 55%, rgba(14, 26, 43, .96) 100%); } /* Belt-and-suspenders insurance on top of the stronger veil: a subtle shadow keeps the lighter body text (`rgba(255,255,255,.72)`) legible even in the split second before/if the veil layer above is somehow not yet painted, and costs nothing when it already is. */ .hero-desc { text-shadow: 0 1px 4px rgba(0, 0, 0, .55); } /* Mobile: back to the stacked (column) card layout — input on top, full-width "Buscar" button below — same shape `.quick-search` used to have before the search moved up into the hero. */ .hero-search { flex-direction: column; } .hero-search button { width: 100%; padding: 1rem 1.25rem; } #convocatorias .ugel-ultimos-contrataciones { padding: 1.1rem 1rem; } #integridad .ugel-ultimos-contrataciones { padding: 1.1rem 1rem; } .areas-grid { grid-template-columns: 1fr; } } /* ========================================================================== EVENTOS (feature 022, T6) — archive sections, single extras, footer block. The cards/grid/ficha styling itself ships with ugel-core (components/proximos-eventos.css); this block only covers theme-owned wrappers around it. ========================================================================== */ .ugel-archive-eventos__seccion { margin-top: 1.75rem; } .ugel-archive-eventos__subtitulo { margin: 0 0 1rem; font-size: var(--ugel-fs-xl); font-weight: var(--ugel-fw-heading); color: var(--ugel-ink); } /* The "pasados" heading doubles as the separator between both sections. */ .ugel-archive-eventos__subtitulo--pasados { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--ugel-border); } .ugel-single__thumbnail { margin: 1.5rem 0; } .ugel-single__thumbnail img { width: 100%; height: auto; border-radius: var(--ugel-r12); } .ugel-single__volver { margin-top: 2rem; } /* Second heading inside the Institución footer column: same style as the column's own h4, plus breathing room above the eventos list. */ .footer-col__eventos-title { margin-top: 1.1rem; } /* The date span inherits the BODY ink by default — invisible on the dark footer (axe: serious color-contrast, T7 live run). Same .62 white the footer already uses for its links and .fb-sub, which passes AA here. */ .footer-col .ugel-proximos-eventos-footer__fecha { color: rgba(255, 255, 255, .62); } /* Feature 024 follow-up (Adolfo): visible heading on the enlaces band — eyebrow-style label, name of the <aside> region via aria-labelledby. */ .enlaces-interes-band__title { margin: 0; padding: 1.25rem 1rem 0; text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ugel-muted); } /* 024 follow-up: the footer brand badge carries the official seal (same file as the header). White chip behind it so the seal reads on the dark footer, mirroring the header's light context. */ .fb-badge--logo { background: var(--ugel-white); } .fb-logo-img { width: 32px; height: 32px; object-fit: contain; }