/** * Inner pages design system — shared components for non-front templates. * Loaded when !is_front_page() (includes playground). Depends on pezweb-base. * Components validated in /playground/#pg-inner. * * Reuses (from base.css, do not duplicate): .doc-corner-cut, .media-frame, * .ph--*, .eyebrow, .lead, .btn--*, base .page-hero / .faq-* API. * * Editorial chrome below mirrors homepage `.is-front .sec--editorial` truths * without un-scoping base.css (homepage keeps its own .is-front rules). */ /* ─────────────────────────────────────────────────────────────────────────── Digitalización hero — VALIDATED (TRUTHS.md “Digitalización hero — homepage clone”). body.is-home-hero opts into base.css :is(.is-front, .is-home-hero) .hero rules. Do not edit homepage markup. Do not reintroduce .page-hero / --archive / --define here. ─────────────────────────────────────────────────────────────────────────── */ .is-home-hero.layout-document .site-main { padding-top: 0; } /* Crumb-first pages (Digi clone + institutional Option A): cancel content-top */ .layout-document .site-main:has(> .page-crumb-bar) { padding-top: 0; } .page-crumb-bar { --page-crumb-h: 3.2rem; /* Stack above the .site-main content edge ruler bands so the bar's opaque background hides the ticks behind the breadcrumb strip. */ position: relative; z-index: 3; margin-top: var(--header-h); background-color: var(--color-chrome-bg); border-bottom: 1px solid var(--color-divider-subtle); } .page-crumb-bar__inner.wrap--wide { display: flex; align-items: center; justify-content: flex-end; /* trail sits on the right, under the header markers */ width: 100%; max-width: none; /* full-bleed — align with header logo / footer brand left rail */ margin-inline: 0; min-height: var(--page-crumb-h); padding-top: 0.6rem; padding-bottom: 0.6rem; /* Override .wrap--wide --side-pad on the right so the trail sits closer to the edge */ padding-right: 1rem; } @media (max-width: 768px) { .page-crumb-bar__inner.wrap--wide { padding-right: var(--side-pad-mobile); } } /* Content-width clip target — clip-in on full-width wrap--wide is invisible (trail finishes revealing in the first ~25% of a 1280px wipe). */ .page-crumb-bar__trail { display: flex; align-items: center; gap: var(--gap-sm); width: max-content; max-width: 100%; } .page-crumb-bar__mark { order: 1; /* after the breadcrumbs — sits on the right of the trail */ width: var(--gap-xxs); height: var(--gap-xxs); flex-shrink: 0; background-color: var(--color-accent); } .page-crumb-bar .single-breadcrumbs { margin: 0; font-size: 1.2rem; color: var(--color-chrome-dim); /* CPT middle span (plain) inherits — was white-on-white */ } .page-crumb-bar .single-breadcrumbs a { color: var(--color-chrome-dim); } .page-crumb-bar .single-breadcrumbs a:hover { color: var(--color-accent); } .page-crumb-bar .single-breadcrumbs span[aria-hidden] { color: var(--color-chrome-dim); } .page-crumb-bar .single-breadcrumbs span[aria-current] { color: var(--color-chrome-muted); } /* Compact Digi-adjacent opener: crumb clears chrome without is-home-hero */ .layout-document .site-main:has(> .page-crumb-bar) { padding-top: 0; } .page-crumb-bar + .page-hero { padding-top: var(--gap-sm); } /* * Digi hero chrome — homepage clone layout, half the top/bottom air. * Crumb sits under fixed header; hero height fills the remaining viewport * so bottom folders stay visible (same first-screen feel as homepage). */ .is-home-hero .hero.hero--light { --digi-hero-pad-y: calc(var(--gap-md) / 2); /* half of homepage gap-md */ padding-top: 0; padding-bottom: var(--digi-hero-pad-y); min-height: calc(100vh - var(--header-h) - var(--page-crumb-h, 3.2rem)); min-height: calc(100dvh - var(--header-h) - var(--page-crumb-h, 3.2rem)); overflow: visible; } .is-home-hero .hero.hero--light > .hero__rail { padding-top: var(--digi-hero-pad-y); /* keep homepage gap between split ↔ folders */ gap: var(--gap-md); } /* Desktop content stack — half of homepage gap-lg vertical pad */ .is-home-hero .hero.hero--light .hero__split--lead .hero__content { padding-top: calc(var(--gap-lg) / 2); padding-bottom: calc(var(--gap-lg) / 2); } /* * Digi content hierarchy: H2 eyebrow ? H1 title (source). * Homepage CSS styles h1 as micro-label and h2 as display — invert for digi only. */ .is-home-hero .hero--light .hero__content h2 { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.1em; line-height: 1.4; color: var(--color-accent); text-transform: uppercase; max-width: none; margin-bottom: -2rem; } .is-home-hero .hero--light .hero__content h1 { font-size: clamp(3.2rem, 3vw + 1.1rem, 6rem); font-weight: var(--weight-h1); letter-spacing: var(--tracking-h1); line-height: var(--leading-h1); color: var(--color-text-alt); text-transform: none; margin-bottom: 0; max-width: 18ch; } /* * Source DOM order H1?H2 (title then eyebrow): keep Digi visual (eyebrow above title). * Digi pages that still markup H2?H1 are unchanged (:has(> h1:first-child) fails). */ .is-home-hero .hero--light .hero__content:has(> h1:first-child) > h2 { order: 1; } .is-home-hero .hero--light .hero__content:has(> h1:first-child) > h1 { order: 2; } .is-home-hero .hero--light .hero__content:has(> h1:first-child) > .hero__actions { order: 3; } /* CTA assurance line under primary button (only when actions include a

) */ .is-home-hero .hero.hero--light .hero__split--lead .hero__actions:has(> p) { flex-direction: column; flex-wrap: wrap; align-items: flex-start; gap: var(--gap-md); } .is-home-hero .hero.hero--light .hero__actions > p { color: var(--color-chrome-muted); font-size: var(--text-sm); line-height: 1.45; max-width: 48ch; margin: 0; text-align: left; } @media (max-width: 1024px) { /* Same stack/centering as homepage — only digi order + half pads */ .is-home-hero .hero.hero--light .hero__split--lead h2 { order: 1; width: 100%; text-align: center; margin-bottom: 0; } .is-home-hero .hero.hero--light .hero__split--lead h1 { order: 2; width: 100%; text-align: center; } /* display:contents on mobile — content pad unused; keep rail half-pad */ .is-home-hero .hero.hero--light .hero__split--lead .hero__content { padding: 0; } } /* Stats H2 lives in the first folder TAB (not body, not above the strip) */ .is-home-hero .hero--light .doc-folder--stats { --doc-folder-tab-h: 2.8rem; --doc-folder-tab-w: min(100%, 32rem); } .is-home-hero .hero--light .doc-folder--stats > h2.doc-folder__tab { display: flex; align-items: center; justify-content: center; width: var(--doc-folder-tab-w); height: var(--doc-folder-tab-h); margin: 0; padding: 0 1rem; box-sizing: border-box; font-size: 1.35rem; font-weight: var(--weight-regular); letter-spacing: 0.01em; line-height: 1.2; color: var(--color-text-alt); text-transform: none; text-align: center; --doc-fill: var(--color-card-bg-alt); } .is-home-hero .hero--light .doc-folder--stats > h2.doc-folder__tab .doc-folder__tab-label { position: relative; z-index: 1; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1024px) { /* Beat base mobile --doc-folder-tab-w: 6rem that clips the digi H2 tab */ .is-home-hero .hero.hero--light .hero__panels.hero__panels--folders .doc-folder--stats { --doc-folder-tab-w: 100%; --doc-folder-tab-h: 4.4rem; } .is-home-hero .hero--light .doc-folder--stats > h2.doc-folder__tab { height: var(--doc-folder-tab-h); padding: 0.5rem 1rem; white-space: normal; } .is-home-hero .hero--light .doc-folder--stats > h2.doc-folder__tab .doc-folder__tab-label { white-space: normal; overflow: visible; text-overflow: unset; text-wrap: balance; } /* Full-width tab: square the white body top-right so the right edge stays vertical */ .is-home-hero .hero--light .doc-folder--stats .doc-folder__body { clip-path: none; background-color: var(--color-bg-alt); border: 1px solid color-mix(in srgb, var(--color-border-alt) 35%, transparent); border-radius: 0; } .is-home-hero .hero--light .doc-folder--stats .doc-folder__body.doc-corner-cut::after { display: none; } } /* Digi hero folders — symmetric inner pad (homepage keeps its own pad-x/pad-y) */ .is-home-hero .hero--light .hero__panels.hero__panels--folders .doc-folder__body { --doc-folder-body-pad-x: var(--gap-sm); --doc-folder-body-pad-y: var(--gap-sm); padding: var(--gap-sm); } /* * PTS pain split (#pts-pain): incluye anatomy — H2+def left, lead+status right. * Full-bleed top rule = spine color/weight; vertical spine meets it as a T. */ #pts-pain { position: relative; } #pts-pain::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background-color: var(--color-spine); z-index: 2; pointer-events: none; } #pts-pain .editorial-block--incluye .editorial-block__doc > .editorial-block__lead { margin: 0; max-width: none; padding: 0; text-align: left; background-color: transparent; } #pts-pain .editorial-block--incluye .editorial-block__doc .doc-status-list { width: 100%; } /* * Single-folder home-hero (PTS): panels span the wrap rail; * one lead folder centered at a readable measure (not a skinny 1/3 flex remnant). */ .is-home-hero .hero.hero--light .hero__panels.hero__panels--folders:has(> .doc-folder:only-child) { display: flex; justify-content: center; width: 100%; max-width: none; } .is-home-hero .hero.hero--light .hero__panels.hero__panels--folders:has(> .doc-folder:only-child) > .doc-folder { flex: 0 1 auto; width: min(100%, 72rem); max-width: 100%; } /* Solo lead folder: isotipo left + copy */ .is-home-hero .hero.hero--light .hero__panels.hero__panels--folders:has(> .doc-folder:only-child) .doc-folder--lead .doc-folder__body { flex-direction: row; align-items: center; gap: var(--gap-md); } .is-home-hero .hero.hero--light .hero__panels.hero__panels--folders:has(> .doc-folder:only-child) .doc-folder__isotipo { position: relative; z-index: 1; flex: 0 0 auto; display: block; width: clamp(4rem, 5.5vw, 5.6rem); height: auto; aspect-ratio: 1; object-fit: contain; pointer-events: none; user-select: none; } .is-home-hero .hero.hero--light .hero__panels.hero__panels--folders:has(> .doc-folder:only-child) .doc-folder__lead { flex: 1 1 auto; min-width: 0; margin: 0; } @media (max-width: 1024px) { .is-home-hero .hero.hero--light .hero__panels.hero__panels--folders:has(> .doc-folder:only-child) { display: flex; grid-template-columns: none; } .is-home-hero .hero.hero--light .hero__panels.hero__panels--folders:has(> .doc-folder:only-child) > .doc-folder { width: 100%; grid-column: auto; } } /* * Digi mobile spacing QA (2026-07-20) — cursor-prompts/07-digi-mobile-spacing.md * Fix 1 (archive-wrap rail) now lives site-wide in base.css — do not redeclare here. * Hero folders: same 2+1 distribution as homepage (≤1024 shared rules — do not 1-col). * Fix 4: #que-documentos TOC — no 3-in-2 orphan row. */ @media (max-width: 1024px) { #que-documentos .soluciones__toc-list { grid-template-columns: 1fr; } } /* ─────────────────────────────────────────────────────────────────────────── 0. Editorial section chrome — spine, masks, rail-stop (homepage parity) Excludes .pg-home-sample — those use base.css .is-front truths only. ─────────────────────────────────────────────────────────────────────────── */ .sec--editorial:not(.pg-home-sample) { /* Field mask for copy on the spine — matches section fill (never hardcoded white) */ --editorial-field: var(--color-bg-alt); --editorial-pad-t: var(--section-pad-t); --editorial-pad-b: var(--section-pad-b); padding-top: var(--editorial-pad-t); padding-bottom: var(--editorial-pad-b); background-color: var(--color-bg-alt); background-image: linear-gradient( to right, transparent calc(50% - 0.5px), var(--color-spine) calc(50% - 0.5px), var(--color-spine) calc(50% + 0.5px), transparent calc(50% + 0.5px) ); } .sec.sec--editorial:not(.sec--light):not(.pg-home-sample) { --editorial-field: var(--color-bg); background-color: var(--color-bg); background-image: linear-gradient( to right, transparent calc(50% - 0.5px), var(--color-spine-on-dark) calc(50% - 0.5px), var(--color-spine-on-dark) calc(50% + 0.5px), transparent calc(50% + 0.5px) ); color: var(--color-text); } .sec.sec--editorial.sec--soft:not(.pg-home-sample) { --editorial-field: var(--color-card-bg-alt); background-color: var(--color-card-bg-alt); /* Fade white ↔ soft grey at both ends; spine sits on top */ background-image: linear-gradient( to right, transparent calc(50% - 0.5px), var(--color-spine) calc(50% - 0.5px), var(--color-spine) calc(50% + 0.5px), transparent calc(50% + 0.5px) ), linear-gradient( to bottom, var(--color-bg-alt) 0%, var(--color-card-bg-alt) var(--editorial-pad-t, var(--section-pad-t)), var(--color-card-bg-alt) calc(100% - var(--editorial-pad-b, var(--section-pad-b))), var(--color-bg-alt) 100% ); } .editorial-block { --editorial-gap: var(--gap-lg); display: flex; flex-direction: column; align-items: center; gap: var(--editorial-gap); width: 100%; } .editorial-block__title { margin: 0; padding: var(--gap-sm); font-size: clamp(3.2rem, 2.5vw + 1.15rem, 5.2rem); font-weight: var(--weight-h2); letter-spacing: var(--tracking-h2); line-height: var(--leading-h2); text-align: center; text-wrap: balance; color: var(--color-text-alt); background-color: var(--editorial-field, var(--color-bg-alt)); } .editorial-block__eyebrow { position: relative; z-index: 1; margin: 0; padding: var(--gap-xxs) var(--gap-sm) 0; text-align: center; background-color: var(--editorial-field, var(--color-bg-alt)); } .editorial-block__eyebrow + .editorial-block__title { margin-top: calc(var(--gap-xs) - var(--editorial-gap)); padding-top: 0; } .editorial-block__lead { position: relative; z-index: 1; margin: 0; max-width: 68ch; padding: var(--gap-sm) var(--gap-md); text-align: center; color: var(--color-muted-alt); background-color: var(--editorial-field, var(--color-bg-alt)); } /* Conoce-parity block — homepage sec--light sec--editorial + editorial-block--conoce (title + leads + CTA on the spine). Used on inner pages without un-scoping .is-front. */ .editorial-block--conoce { --editorial-gap: var(--gap-sm); gap: var(--editorial-gap); } .editorial-block--conoce .editorial-block__title { max-width: 28ch; } .editorial-block--conoce .editorial-block__lead { max-width: 48ch; padding: var(--gap-xxs) var(--gap-sm); font-size: var(--text-md); font-weight: var(--weight-medium); line-height: 1.5; color: var(--color-muted-alt); } .conoce__cta { display: flex; flex-direction: column; align-items: center; gap: var(--gap-sm); width: 100%; position: relative; z-index: 1; padding: var(--gap-xxs) 0; /* Field mask — spine runs behind the CTA, not through the button face */ background-color: var(--editorial-field, var(--color-bg-alt)); } .sec--soft .conoce__cta { background-color: var(--editorial-field, var(--color-card-bg-alt)); } .conoce__cta .cta-band__actions { justify-content: center; } /* Outline / ghost on editorial — opaque fill so spine stays behind the control */ .sec--editorial.sec--light .btn--outline, .sec--editorial.sec--light .btn--ghost { background-color: var(--editorial-field, var(--color-bg-alt)); } .sec--editorial.sec--soft .btn--outline, .sec--editorial.sec--soft .btn--ghost { background-color: var(--editorial-field, var(--color-card-bg-alt)); } .sec.sec--editorial:not(.sec--light) .btn--outline, .sec.sec--editorial:not(.sec--light) .btn--ghost { background-color: var(--editorial-field, var(--color-bg)); } /* Define block — homepage editorial-block--define anatomy for body sections. (page-hero--define is a separate composition and does not use sec--editorial.) */ .sec--editorial:not(.pg-home-sample) .editorial-block--define { align-items: stretch; gap: var(--gap-md); } .sec--editorial:not(.pg-home-sample) .editorial-block--define > .editorial-block__title { align-self: stretch; max-width: 55rem; padding-inline: 0; padding-bottom: 0; text-align: left; } .sec--editorial:not(.pg-home-sample) .editorial-block--define .editorial-block__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-md) var(--gap-lg); align-items: stretch; width: 100%; } .sec--editorial:not(.pg-home-sample) .editorial-block--define .editorial-block__def-col { display: flex; flex-direction: column; gap: var(--gap-md); min-width: 0; } .sec--editorial:not(.pg-home-sample) .editorial-block--define .editorial-block__def { margin: 0; font-size: clamp(1.35rem, 1.1rem + 0.4vw, 1.7rem); font-weight: var(--weight-regular); line-height: 1.55; color: var(--color-text-alt); text-align: left; text-wrap: pretty; background-color: transparent; max-width: none; padding: 0; } .sec--editorial:not(.pg-home-sample) .editorial-block--define .editorial-block__def-col .cta-band__actions { justify-content: flex-start; } /* Question under CTA — playground title type without loading doc-vocab-mockup.css */ .sec--editorial:not(.pg-home-sample) .editorial-block--define .editorial-block__def-col > .doc-vocab-mock__title { margin: 0; max-width: none; font-size: var(--text-h3); font-weight: var(--weight-regular); letter-spacing: -0.01em; line-height: 1.35; color: var(--color-text-alt); text-wrap: balance; } .sec--editorial:not(.pg-home-sample) .editorial-block--define .editorial-block__doc { position: relative; display: flex; flex-direction: column; gap: var(--gap-md); min-width: 0; height: 100%; } .sec--editorial:not(.pg-home-sample) .editorial-block--define .editorial-block__doc .doc-folder { position: relative; z-index: 1; flex: 0 0 auto; width: 100%; height: auto; min-height: 0; } .sec--editorial:not(.pg-home-sample) .editorial-block--define .editorial-block__doc .doc-folder__body { display: flex; flex-direction: column; justify-content: center; gap: var(--gap-sm); padding: var(--gap-sm); } .sec--editorial:not(.pg-home-sample) .editorial-block--define .editorial-block__doc .editorial-block__lead { margin: 0; max-width: none; padding: 0; text-align: left; font-size: clamp(1.25rem, 1.05rem + 0.35vw, 1.55rem); font-weight: var(--weight-regular); line-height: 1.55; color: var(--color-muted-alt); background-color: transparent; text-wrap: pretty; } .sec--editorial:not(.pg-home-sample) .editorial-block--define .media-frame { --doc-corner-cut: 0.9rem; clip-path: polygon( 0 0, calc(100% - var(--doc-corner-cut)) 0, 100% var(--doc-corner-cut), 100% 100%, 0 100% ); } .sec--editorial:not(.pg-home-sample) .editorial-block--define .editorial-block__doc-media { position: relative; z-index: 0; display: block; width: 100%; max-width: none; height: auto; margin: 0; object-fit: cover; pointer-events: none; user-select: none; } /* Constructoras define bands — Digi stock folders; tighten title rhythm only */ :is(#spc-gestion, #spc-pagos, #spc-terreno) .editorial-block--define { --editorial-gap: var(--gap-md); gap: var(--gap-md); } :is(#spc-gestion, #spc-pagos, #spc-terreno) .editorial-block--define > .editorial-block__eyebrow, :is(#spc-gestion, #spc-pagos, #spc-terreno) .editorial-block--define > .anim-brow > .editorial-block__eyebrow { align-self: stretch; text-align: left; padding-inline: 0; } /* Keep 2e on center spine; eyebrow stays left below */ :is(#spc-gestion, #spc-pagos, #spc-terreno) .editorial-block--define > .anim-brow + .editorial-block__title { margin-top: 0; } /* Tab + body both white (match Digi define body fill) */ :is(#spc-gestion, #spc-pagos, #spc-terreno) .editorial-block--define .editorial-block__doc .doc-folder__tab, :is(#spc-gestion, #spc-pagos, #spc-terreno) .editorial-block--define .editorial-block__doc .doc-folder__body { --doc-fill: var(--color-bg-alt); } /* FAQ: rail-stop on eyebrow (homepage pattern) — not text above the square */ #spc-faq.faq.faq--dossier > .wrap--wide > .eyebrow { --rail-mark: var(--gap-xxs); --rail-clear: var(--gap-sm); position: relative; z-index: 1; margin: 0; padding: var(--gap-xxs) var(--gap-sm) 0; text-align: center; background-color: transparent; } #spc-faq.faq.faq--dossier > .wrap--wide > .eyebrow::before { content: ''; position: absolute; left: 50%; bottom: 100%; z-index: 1; width: 3px; height: var(--rail-clear); transform: translateX(-50%); pointer-events: none; background-color: var(--color-bg-alt); } #spc-faq.faq.faq--dossier > .wrap--wide > .eyebrow::after { content: ''; position: absolute; left: 50%; bottom: calc(100% + var(--rail-clear)); z-index: 2; width: var(--rail-mark); height: var(--rail-mark); transform: translateX(-50%); pointer-events: none; background-color: var(--color-accent); } /* Kill Digi FAQ H2 rail — square lives on eyebrow here */ #spc-faq.faq.faq--dossier > .wrap--wide > h2::before, #spc-faq.faq.faq--dossier > .wrap--wide > h2::after { content: none; } #spc-faq.faq.faq--dossier > .wrap--wide > .eyebrow + h2 { margin-top: calc(var(--gap-xs) - var(--gap-lg)); padding-top: 0; } @media (max-width: 1024px) { .sec--editorial:not(.pg-home-sample) .editorial-block--define .editorial-block__body { grid-template-columns: 1fr; gap: var(--gap-md); } .sec--editorial:not(.pg-home-sample) .editorial-block--define > .editorial-block__title { max-width: none; } } /* Incluye block — define split with H2 in left col + doc-command folder on right */ .sec--editorial:not(.pg-home-sample) .editorial-block--incluye { gap: var(--gap-md); } .sec--editorial:not(.pg-home-sample) .editorial-block--incluye .editorial-block__def-col > .editorial-block__title { align-self: stretch; max-width: none; margin: 0; padding: 0; text-align: left; background-color: transparent; } .sec--editorial:not(.pg-home-sample) .editorial-block--incluye .editorial-block__doc > .doc-vocab-mock__title { margin: 0; max-width: none; font-size: var(--text-h3); font-weight: var(--weight-regular); letter-spacing: -0.01em; line-height: 1.35; color: var(--color-text-alt); text-wrap: balance; } .sec--editorial:not(.pg-home-sample) .editorial-block--incluye .doc-command--folder { --dvm-fill: transparent; --dvm-fill-tint: var(--color-card-bg-alt); --dvm-border: transparent; --dvm-ink: var(--color-text-alt); --dvm-dim: var(--color-dim-alt); --dvm-green: var(--color-accent); --dvm-navy: var(--color-bg); min-height: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; } .sec--editorial:not(.pg-home-sample) .editorial-block--incluye .doc-command--folder .doc-command__results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-xxs); padding: 0; } @media (max-width: 1024px) { .sec--editorial:not(.pg-home-sample) .editorial-block--incluye .doc-command--folder .doc-command__results { grid-template-columns: 1fr; } } .sec--editorial:not(.pg-home-sample) .editorial-block--incluye .doc-command--folder .doc-command__row { opacity: 1; transform: none; border-radius: 0; padding: 0.85rem 0.6rem; background: color-mix(in srgb, var(--color-card-bg-alt) 55%, transparent); } .sec--editorial:not(.pg-home-sample) .editorial-block--incluye .doc-command--folder .doc-command__name { white-space: normal; text-wrap: pretty; overflow: visible; text-overflow: unset; line-height: 1.4; } .sec--editorial:not(.pg-home-sample) .editorial-block--incluye .editorial-block__doc .doc-folder__body { padding: var(--gap-sm); } .sec.sec--editorial:not(.sec--light):not(.pg-home-sample) .editorial-block__title, .sec.sec--editorial:not(.sec--light):not(.pg-home-sample) .editorial-block__eyebrow, .sec.sec--editorial:not(.sec--light):not(.pg-home-sample) .editorial-block__lead { color: var(--color-text); } .sec.sec--editorial:not(.sec--light):not(.pg-home-sample) .editorial-block__lead { color: var(--color-muted); } /* Doc-vault ornament — compact secure-archive mark above editorial titles */ .editorial-block > .doc-vault--ornament { --dvm-navy: transparent; --dvm-surface: var(--color-surface); --dvm-green: var(--color-accent); position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; margin: 0 0 var(--gap-sm); padding: 0; background: transparent; border-radius: 0; overflow: visible; } .editorial-block > .doc-vault--ornament .doc-vault__stage { width: clamp(7.2rem, 5.2rem + 5vw, 10rem); height: clamp(7.2rem, 5.2rem + 5vw, 10rem); } .editorial-block > .doc-vault--ornament .doc-vault__glow, .editorial-block > .doc-vault--ornament.is-playing .doc-vault__glow { display: none; animation: none; opacity: 0; } .editorial-block > .doc-vault--ornament .doc-vault__ring--inner { inset: clamp(1.1rem, 0.75rem + 0.7vw, 1.5rem); } .editorial-block > .doc-vault--ornament .doc-vault__core { inset: clamp(2rem, 1.4rem + 1.2vw, 2.8rem); box-shadow: none; } .editorial-block > .doc-vault--ornament.is-playing .doc-vault__core { animation: none; box-shadow: none; } .editorial-block > .doc-vault--ornament .doc-ico--lg { width: clamp(1.55rem, 1.15rem + 0.7vw, 2.1rem); height: clamp(1.55rem, 1.15rem + 0.7vw, 2.1rem); } /* Light sections — vault rings/icon were near-white (dark-bg tuned) */ .sec--light .editorial-block > .doc-vault--ornament { --dvm-surface: var(--color-bg-alt); } .sec--light .editorial-block > .doc-vault--ornament .doc-vault__ring--outer { border-color: color-mix(in srgb, var(--color-text-alt) 22%, transparent); } .sec--light .editorial-block > .doc-vault--ornament .doc-vault__ring--inner { border-color: color-mix(in srgb, var(--color-text-alt) 14%, transparent); } .sec--light .editorial-block > .doc-vault--ornament .doc-vault__core { background: var(--color-bg-alt); border-color: color-mix(in srgb, var(--color-border-alt) 80%, transparent); color: var(--color-text-alt); } .editorial-block > .doc-vault--ornament + .editorial-block__title { margin-top: 0; padding-top: 0; } /* Hoja Beneficios — homepage benefits-dossier shell (no .is-front) */ .is-home-hero .editorial-block--benefits { --editorial-gap: var(--gap-lg); gap: var(--editorial-gap); } .is-home-hero .editorial-block--benefits .benefits-dossier { width: 100%; position: relative; z-index: 1; background-color: transparent; } .is-home-hero .editorial-block--benefits .editorial-block__title { max-width: min(100%, 28ch); margin-inline: auto; text-align: center; } /* Match homepage dossier body type on flagship inners */ .is-home-hero .benefits-dossier__folders .doc-folder__body p { font-size: inherit; } /* Rail-stop — green square + clear-air mask above eyebrow/heading */ .rail-stop { --rail-mark: var(--gap-xxs); --rail-clear: var(--gap-sm); position: relative; } .rail-stop::before { content: ''; position: absolute; left: 50%; bottom: 100%; z-index: 1; width: 3px; height: var(--rail-clear); transform: translateX(-50%); pointer-events: none; background-color: var(--editorial-field, var(--color-bg-alt)); } .rail-stop::after { content: ''; position: absolute; left: 50%; bottom: calc(100% + var(--rail-clear)); z-index: 2; width: var(--rail-mark); height: var(--rail-mark); transform: translateX(-50%); pointer-events: none; background-color: var(--color-accent); } .sec.sec--editorial:not(.sec--light):not(.pg-home-sample) .rail-stop::before { background-color: var(--editorial-field, var(--color-bg)); } /* FAQ dossier section shell (inner pages + playground #pg-inner) Top pad includes rail-mark stack so edge→square matches closing CTA. */ .faq.faq--dossier:not(.pg-home-sample) { --editorial-field: var(--color-bg-alt); padding-top: calc(var(--section-pad-t) + var(--gap-sm) + var(--gap-xxs)); padding-bottom: var(--section-pad-b); border-bottom: none; background-color: var(--color-bg-alt); background-image: linear-gradient( to right, transparent calc(50% - 0.5px), var(--color-spine) calc(50% - 0.5px), var(--color-spine) calc(50% + 0.5px), transparent calc(50% + 0.5px) ); } /* Title→list = editorial gap-lg (same as Beneficios / editorial-block) */ .faq.faq--dossier:not(.pg-home-sample) > .wrap--wide, .faq.faq--dossier:not(.pg-home-sample) > .archive-wrap { display: flex; flex-direction: column; align-items: stretch; gap: var(--gap-lg); } .faq.faq--dossier:not(.pg-home-sample) > .wrap--wide > h2, .faq.faq--dossier:not(.pg-home-sample) > .archive-wrap > h2 { --rail-mark: var(--gap-xxs); --rail-clear: var(--gap-sm); position: relative; margin: 0; padding: var(--gap-sm); text-align: center; font-size: clamp(2.8rem, 2vw + 1.2rem, 4.4rem); font-weight: var(--weight-h2); letter-spacing: var(--tracking-h2); line-height: var(--leading-h2); color: var(--color-text-alt); text-wrap: balance; background-color: var(--editorial-field, var(--color-bg-alt)); } .faq.faq--dossier:not(.pg-home-sample) > .wrap--wide > h2::before, .faq.faq--dossier:not(.pg-home-sample) > .archive-wrap > h2::before { content: ''; position: absolute; left: 50%; bottom: 100%; z-index: 1; width: 3px; height: var(--rail-clear); transform: translateX(-50%); pointer-events: none; background-color: var(--editorial-field, var(--color-bg-alt)); } .faq.faq--dossier:not(.pg-home-sample) > .wrap--wide > h2::after, .faq.faq--dossier:not(.pg-home-sample) > .archive-wrap > h2::after { content: ''; position: absolute; left: 50%; bottom: calc(100% + var(--rail-clear)); z-index: 2; width: var(--rail-mark); height: var(--rail-mark); transform: translateX(-50%); pointer-events: none; background-color: var(--color-accent); } /* Homepage FAQ dossier grid — available on inner pages (not .is-front-scoped) */ .faq.faq--dossier:not(.pg-home-sample) .faq-dossier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--gap-md); width: 100%; max-width: 128rem; margin-inline: auto; } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__col { display: flex; flex-direction: column; gap: var(--gap-sm); min-width: 0; } @media (max-width: 768px) { .faq.faq--dossier:not(.pg-home-sample) .faq-dossier { grid-template-columns: 1fr; } } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier .faq-item, .faq.faq--dossier:not(.pg-home-sample) .faq-dossier .faq-item:first-child { border: none; } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__entry { --doc-corner-cut: 0.6rem; --doc-folder-tab-h: 1.1rem; --doc-folder-tab-w: min(28%, 5.6rem); position: relative; } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__tab { position: absolute; top: 0; left: 0; z-index: 2; width: var(--doc-folder-tab-w); height: var(--doc-folder-tab-h); --doc-fill: var(--color-card-bg-alt); --doc-border-color: color-mix(in srgb, var(--color-border-alt) 40%, transparent); } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__tab.doc-corner-cut::after { bottom: calc(var(--doc-border-w, 1px) * -1); } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__entry.is-open .faq-dossier__tab { --doc-fill: var(--color-bg-alt); } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__body { position: relative; z-index: 1; margin-top: calc(var(--doc-folder-tab-h) - var(--doc-border-w, 1px)); --doc-fill: var(--color-bg-alt); display: flex; flex-direction: column; } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__body > * { position: relative; z-index: 1; } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__body .faq-question-wrap, .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__body .faq-question { width: 100%; } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__body .faq-question { position: relative; z-index: 1; align-items: center; padding: var(--gap-sm); font-size: var(--text-md); font-weight: var(--weight-regular); line-height: 1.45; color: var(--color-text-alt); gap: var(--gap-sm); transition: color 0.15s ease; } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__label { flex: 1; min-width: 0; } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier .faq-question__icon { width: 1.8rem; height: 1.8rem; flex-shrink: 0; color: var(--color-dim-alt); transform: rotate(0deg); transition: transform 0.25s ease, color 0.15s ease; } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__entry.is-open .faq-question__icon { transform: rotate(90deg); color: var(--color-accent); } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__body .faq-question:hover { color: var(--color-text-alt); } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier .faq-answer { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1); } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier .faq-answer > .faq-dossier__sheet { min-height: 0; overflow: hidden; } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__entry.is-open .faq-answer { grid-template-rows: 1fr; } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__sheet > p, .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__sheet > div { padding: 0 var(--gap-sm) var(--gap-sm); } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__sheet p { margin: 0; font-size: var(--text-base); color: var(--color-dim-alt); line-height: 1.7; } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__sheet > div > ul, .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__sheet > div > ol { padding-inline: 0; padding-bottom: 0; } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__sheet ul, .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__sheet ol { list-style: none; margin: var(--gap-sm) 0 0; padding: 0 var(--gap-sm) var(--gap-sm); display: flex; flex-direction: column; gap: var(--gap-sm); } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__sheet li { position: relative; display: grid; grid-template-columns: var(--gap-xs) minmax(0, 1fr); gap: var(--gap-sm); align-items: start; margin: 0; padding: 0; font-size: var(--text-base); color: var(--color-dim-alt); line-height: 1.7; } .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__sheet li::before { content: ''; width: var(--gap-xs); height: var(--gap-xs); margin-top: 0.55em; flex-shrink: 0; background-color: var(--color-accent); } @media (max-width: 640px) { .faq.faq--dossier:not(.pg-home-sample) .faq-dossier__body .faq-question { font-size: var(--text-base); } } /* Inner-page doc-folder anatomy (matches .is-front .sec--editorial .doc-folder) */ .sec--editorial:not(.pg-home-sample) .doc-folder { --doc-folder-tab-h: 1.4rem; --doc-folder-tab-w: min(40%, 6.4rem); --doc-corner-cut: 0.9rem; position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; } .sec--editorial:not(.pg-home-sample) .doc-folder__tab { position: absolute; top: 0; left: 0; z-index: 2; width: var(--doc-folder-tab-w); height: var(--doc-folder-tab-h); --doc-fill: var(--color-card-bg-alt); } .sec--editorial:not(.pg-home-sample) .doc-folder__tab.doc-corner-cut::after { bottom: calc(var(--doc-border-w, 1px) * -1); } .sec--editorial:not(.pg-home-sample) .doc-folder__body { position: relative; z-index: 1; margin-top: calc(var(--doc-folder-tab-h) - 1px); flex: 1 1 auto; padding: var(--gap-sm); --doc-fill: var(--color-bg-alt); } .sec--editorial:not(.pg-home-sample) .doc-folder__body > * { position: relative; z-index: 1; } /* ─────────────────────────────────────────────────────────────────────────── 0. .page-hero chrome — beats base.css void (50vh + center + gap-xl). Critical: base .archive-wrap pads --gap-xl (188px) — that alone killed heroes. ─────────────────────────────────────────────────────────────────────────── */ .page-hero { min-height: 0; align-items: flex-start; justify-content: flex-start; /* Top = chrome clear (header); bottom = section rhythm — see TRUTHS spacing contract */ padding-top: calc(var(--header-h) + var(--gap-sm)); padding-bottom: var(--section-pad-b); } /* Compact H1-only band after Digi crumb — crumb already clears the fixed header */ .page-crumb-bar + .page-hero { margin-top: 0; padding-top: var(--gap-md); padding-bottom: var(--gap-md); } /* Quiénes Somos — H1 as eyebrow of Nuestra historia */ #qs-historia h1.editorial-block__eyebrow { font-family: var(--font-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3; color: var(--color-accent); } #cnt-hero h1.editorial-block__eyebrow { font-family: var(--font-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3; color: var(--color-accent); } /* Lead under H2 — body-weight copy, not h3 display scale */ #cnt-hero .editorial-block__title + .editorial-block__lead { margin-top: calc(var(--gap-xxs) - var(--editorial-gap)); padding: var(--gap-xxs) var(--gap-sm); font-size: var(--text-base); font-weight: var(--weight-regular); letter-spacing: normal; line-height: 1.5; color: var(--color-muted-alt); } #cnt-hero .folder-grid { --doc-folder-tab-h: 3.2rem; --doc-folder-tab-w: min(100%, 20rem); width: 100%; max-width: 100rem; margin-inline: auto; align-items: stretch; } #cnt-hero .folder-grid__item { display: flex; flex-direction: column; min-height: 100%; } #cnt-hero .folder-grid__item > h3.folder-grid__tab.folder-grid__title { position: absolute; top: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; min-width: min(100%, 9rem); height: var(--doc-folder-tab-h); margin: 0; padding: 0 var(--gap-sm); box-sizing: border-box; font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0.02em; line-height: 1.25; text-transform: none; text-align: center; white-space: nowrap; color: var(--color-text-alt); --doc-fill: var(--color-card-bg-alt); } #cnt-hero .folder-grid__item > h3.folder-grid__tab .folder-grid__tab-label { position: relative; z-index: 1; display: block; overflow: visible; text-overflow: unset; white-space: nowrap; font-size: inherit; font-weight: inherit; } #cnt-hero .folder-grid__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--gap-md); padding: var(--gap-md); padding-bottom: calc(var(--gap-md) + var(--gap-xs)); min-height: 0; } #cnt-hero .cnt-folder__context { margin: 0; max-width: 36ch; font-size: var(--text-md); font-weight: var(--weight-regular); line-height: 1.55; color: var(--color-text-alt); } #cnt-hero .cnt-folder__action { display: flex; flex-direction: column; align-items: stretch; gap: var(--gap-sm); margin-top: auto; padding-top: 0; border-top: none; } #cnt-hero .cnt-folder__prompt { margin: 0; max-width: none; font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: 1.5; color: var(--color-muted-alt); } #cnt-hero .folder-grid__body .cta-dossier__actions { display: flex; width: 100%; margin-top: 0; } #cnt-hero .folder-grid__body .cta-dossier__actions .btn { width: 100%; justify-content: center; text-align: center; } @media (max-width: 768px) { #cnt-hero .folder-grid__item > h3.folder-grid__tab.folder-grid__title { position: relative; width: 100%; max-width: 100%; height: auto; min-height: var(--doc-folder-tab-h); white-space: normal; padding-block: var(--gap-xs); } #cnt-hero .folder-grid__item > h3.folder-grid__tab .folder-grid__tab-label { white-space: normal; text-wrap: balance; } #cnt-hero .folder-grid__body { margin-top: -1px; clip-path: none; border: 1px solid color-mix(in srgb, var(--color-border-alt) 35%, transparent); border-radius: 0; background-color: var(--color-bg-alt); } #cnt-hero .folder-grid__body.doc-corner-cut::after { display: none; } #cnt-hero .cnt-folder__context { max-width: none; } } /* Contacto — HubSpot in-page sheet */ #formulario-contacto .doc-folder { max-width: 72rem; margin-inline: auto; } /* Contacto — Datos: inner 2 cols inside benefits dossier (folders + media) */ #cnt-datos .cnt-datos__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-md); align-items: stretch; width: 100%; } #cnt-datos .benefits-dossier__folders, #cnt-datos .cnt-datos__media { min-width: 0; } #cnt-datos .cnt-datos__media { display: flex; align-self: stretch; } #cnt-datos .cnt-datos__media .media-frame { --doc-corner-cut: 0.9rem; flex: 1 1 auto; width: 100%; height: 100%; min-height: 100%; clip-path: polygon( 0 0, calc(100% - var(--doc-corner-cut)) 0, 100% var(--doc-corner-cut), 100% 100%, 0 100% ); } #cnt-datos .cnt-datos__media .media-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: none; /* cover already crops; skip intrinsic letterbox nudge */ } #cnt-datos .benefits-dossier__folders { grid-template-columns: minmax(0, 1fr); } #cnt-datos .benefits-dossier__block h4 { margin: 0 0 var(--gap-sm); font-family: var(--font-primary); font-size: var(--text-md); font-weight: var(--weight-medium); line-height: var(--leading-tight); letter-spacing: -0.01em; color: var(--color-text-alt); } #cnt-datos .cnt-datos__list { display: flex; flex-direction: column; gap: var(--gap-xxs); list-style: none; margin: 0; padding: 0; } #cnt-datos .cnt-datos__list li { display: flex; align-items: flex-start; gap: var(--gap-xs); margin: 0; font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--color-muted-alt); } #cnt-datos .cnt-datos__mark { width: var(--gap-xxs); height: var(--gap-xxs); flex-shrink: 0; margin-top: 0.45em; background-color: var(--color-accent); } @media (max-width: 900px) { #cnt-datos .cnt-datos__split { grid-template-columns: minmax(0, 1fr); } #cnt-datos .cnt-datos__media .media-frame { min-height: clamp(16rem, 42vw, 24rem); } } #formulario-contacto .doc-folder__body { padding: var(--gap-md); } #formulario-contacto .hs-form-host { width: 100%; } #formulario-contacto .hs-form-frame { min-height: 40rem; } #qs-historia .editorial-block__title + .editorial-block__lead { margin-top: calc(var(--gap-xxs) - var(--editorial-gap)); } #qs-historia .qs-historia__logo { display: block; width: auto; height: auto; max-width: min(28rem, 70%); max-height: 7.2rem; margin-inline: auto; object-fit: contain; } /* Quiénes Somos — misión/visión benefits-dossier stays 2-col */ #qs-mision .benefits-dossier__folders { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 768px) { #qs-mision .benefits-dossier__folders { grid-template-columns: 1fr; } } #qs-why .qs-why__isotipo { display: block; width: auto; height: auto; max-width: min(18rem, 48%); max-height: 18rem; margin-inline: auto; object-fit: contain; } #qs-why .editorial-block__title + .qs-why__isotipo { margin-top: calc(var(--gap-sm) - var(--editorial-gap)); } #qs-why .qs-why__isotipo + .editorial-block__lead { margin-top: calc(var(--gap-sm) - var(--editorial-gap)); } /* Editorial media rows — Quiénes Somos cap-dir photo treatment (all pages) */ /* The media figure is ALWAYS the wipe wrapper (pw-anim normalizes every editorial row to clip-in). It must never carry a shape clip-path — that lives on the inner .media-frame / .cap-dir__thumb — so the animated inset can't flatten the corner-cut, no matter how the image workflow imports it. */ .editorial-media-rows__media { overflow: hidden; } /* Workflow imports the slot as `.media-slot` on the figure (it owns a corner-cut clip-path + fill). Strip both here so the figure is a clean wrapper; the inner .media-frame keeps the corner-cut and isotipo mark. */ .editorial-media-rows__media.media-slot { clip-path: none; background-color: transparent; } .editorial-media-rows__media .cap-dir__thumb { width: 100%; min-height: clamp(12rem, 24vw, 20rem); /* Drop the slider-only translateZ(0): its own GPU layer escapes the ancestor figure's animated clip-path, defeating the wipe. No track transform here, so promotion is unnecessary. */ transform: none; } .editorial-media-rows__media .cap-dir__thumb .ph--media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; margin: 0; } .page-hero > .archive-wrap, .page-hero > .wrap--wide { width: 100%; padding-top: 0; padding-bottom: 0; padding-left: var(--side-pad); padding-right: var(--side-pad); } /* Stack rhythm comes from __inner gap only — kill stacked margins. */ .page-hero .single-breadcrumbs { margin-bottom: 0; } .page-hero__eyebrow { margin: 0; } .page-hero h1 { margin: 0; } .page-hero__lead, .page-hero .lead { margin: 0; } .page-hero__inner { gap: var(--gap-sm); } .page-hero__folders { margin-top: 0; } .page-hero__folders > h2 { margin: 0 0 var(--gap-xxs); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-chrome-muted); } /* ─────────────────────────────────────────────────────────────────────────── 1. .page-hero--split + .page-hero__media Markup: .page-hero.page-hero--split > .wrap--wide|.archive-wrap > (.page-hero__inner + .page-hero__media) ─────────────────────────────────────────────────────────────────────────── */ .page-hero--split > .wrap--wide, .page-hero--split > .archive-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-md); align-items: center; width: 100%; } .page-hero--split .page-hero__inner { min-width: 0; justify-content: center; } .page-hero__media { min-width: 0; width: 100%; display: flex; align-items: center; } .page-hero__media .media-slot { width: 100%; } .page-hero__media .hero-anim--1a { width: 100%; max-width: none; } .page-hero__media .hero-anim--1a-excerpt { width: 100%; max-width: none; } @media (max-width: 1024px) { .page-hero--split > .wrap--wide, .page-hero--split > .archive-wrap { grid-template-columns: 1fr; gap: var(--gap-md); } .page-hero--split .page-hero__media { order: 1; } } /* ─────────────────────────────────────────────────────────────────────────── 1b. .page-hero--define — centered editorial hero. A vertical line runs the centered stack and terminates in a green square just below the button; the media row (image left / folder right) sits below with no line. Markup: .page-hero.page-hero--define > .archive-wrap > .editorial-block.editorial-block--define > (.page-hero__lede > (breadcrumb + h2.eyebrow + h1 + lead + actions) + .editorial-block__body > (.media-frame + .doc-folder)) ─────────────────────────────────────────────────────────────────────────── */ .page-hero.page-hero--define > .archive-wrap, .page-hero.page-hero--define > .wrap--wide { width: 100%; padding-top: 0; padding-bottom: 0; } /* Define keeps a slightly tighter bottom; chrome §0 already killed the void. */ .page-hero.page-hero--define { padding-bottom: var(--gap-md); } .page-hero.page-hero--define + .sec--editorial { --editorial-pad-t: var(--gap-md); padding-top: var(--editorial-pad-t); } .page-hero.page-hero--define + .sec--editorial > .archive-wrap, .page-hero.page-hero--define + .sec--editorial > .wrap--wide { padding-top: 0; } .page-hero.page-hero--define .editorial-block--define { align-items: center; gap: var(--gap-lg); text-align: center; width: 100%; } /* Eyebrow is an

per source hierarchy — keep accent color (base .page-hero h2 would otherwise force chrome text). */ .page-hero h2.page-hero__eyebrow { color: var(--color-accent); } /* Line from under header → green square below CTA. */ .page-hero.page-hero--define .page-hero__lede { --lede-line-extend: calc(var(--header-h) + var(--gap-sm)); position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); width: 100%; margin-top: calc(-1 * var(--lede-line-extend)); padding-top: var(--lede-line-extend); padding-bottom: var(--gap-md); background-image: linear-gradient( to right, transparent calc(50% - 0.5px), var(--color-spine) calc(50% - 0.5px), var(--color-spine) calc(50% + 0.5px), transparent calc(50% + 0.5px) ); } .page-hero.page-hero--define .page-hero__lede::after { content: ''; position: absolute; left: 50%; bottom: 0; z-index: 2; width: var(--gap-xxs); height: var(--gap-xxs); transform: translateX(-50%); background-color: var(--color-accent); pointer-events: none; } /* Centered stack — spine shows through copy (no field mask paint). */ .page-hero.page-hero--define .single-breadcrumbs, .page-hero.page-hero--define .page-hero__eyebrow, .page-hero.page-hero--define .page-hero__lede > h1, .page-hero.page-hero--define .page-hero__lede > .editorial-block__lead, .page-hero.page-hero--define .page-hero__actions { position: relative; z-index: 1; background-color: transparent; } .page-hero.page-hero--define .single-breadcrumbs { justify-content: center; margin-bottom: 0; padding-inline: var(--gap-sm); font-size: 1.3rem; font-weight: var(--weight-medium); } .page-hero--define .page-hero__eyebrow { margin: 0; padding-inline: var(--gap-sm); } .page-hero--define .page-hero__lede > h1 { margin: 0; max-width: 20ch; padding-inline: var(--gap-sm); } /* Eyebrow + H1 pair — homepage editorial tight coupling (Casos / Conoce). Specificity must beat the > h1 rule above so the collapse actually applies. */ .page-hero--define .page-hero__lede > .page-hero__eyebrow + h1 { margin-top: calc(var(--gap-xxs) - var(--gap-md)); } /* Lead — homepage "Conoce RLD" editorial-block__lead treatment. */ .page-hero--define .page-hero__lede > .editorial-block__lead { max-width: 48ch; margin: 0; padding: var(--gap-xxs) var(--gap-sm); text-align: center; font-size: var(--text-md); font-weight: var(--weight-medium); line-height: 1.5; color: var(--color-muted-alt); } .page-hero--define .page-hero__actions { justify-content: center; padding-inline: var(--gap-sm); } /* Media row — image left, folder right; no center line. */ .page-hero--define .editorial-block__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-md) var(--gap-lg); align-items: stretch; width: 100%; text-align: left; } .page-hero--define .media-frame { --doc-corner-cut: 0.9rem; height: 100%; clip-path: polygon( 0 0, calc(100% - var(--doc-corner-cut)) 0, 100% var(--doc-corner-cut), 100% 100%, 0 100% ); } .page-hero--define .editorial-block__doc-media { display: block; width: 100%; max-width: none; height: 100%; margin: 0; object-fit: cover; transform: none; /* cover already crops; skip intrinsic letterbox nudge */ pointer-events: none; user-select: none; } .page-hero--define .doc-folder { --doc-folder-tab-h: 1.4rem; --doc-folder-tab-w: min(40%, 6.4rem); --doc-corner-cut: 0.9rem; position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; } .page-hero--define .doc-folder__tab { position: absolute; top: 0; left: 0; z-index: 2; width: var(--doc-folder-tab-w); height: var(--doc-folder-tab-h); --doc-fill: var(--color-card-bg-alt); } .page-hero--define .doc-folder__tab.doc-corner-cut::after { bottom: calc(var(--doc-border-w, 1px) * -1); } .page-hero--define .doc-folder__body { position: relative; z-index: 1; margin-top: calc(var(--doc-folder-tab-h) - 1px); flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: var(--gap-sm); --doc-fill: var(--color-bg-alt); } .page-hero--define .doc-folder__body > * { position: relative; z-index: 1; } .page-hero--define .doc-folder .editorial-block__lead { margin: 0; max-width: none; padding: 0; text-align: left; font-size: clamp(1.25rem, 1.05rem + 0.35vw, 1.55rem); font-weight: var(--weight-regular); line-height: 1.55; color: var(--color-muted-alt); background-color: transparent; text-wrap: pretty; } @media (max-width: 1024px) { .page-hero--define .editorial-block__body { grid-template-columns: 1fr; gap: var(--gap-md); } /* Mobile — no vertical spine + green terminus on define heroes */ .page-hero.page-hero--define .page-hero__lede { background-image: none; } .page-hero.page-hero--define .page-hero__lede::after { display: none; } } /* ─────────────────────────────────────────────────────────────────────────── 2. .page-hero__folders Optional 1–2 doc-folder strip under hero content (narrower than homepage). Markup: .page-hero__folders > .doc-folder.doc-folder--stats|lead (tab + body) ─────────────────────────────────────────────────────────────────────────── */ .page-hero__folders { --doc-folder-tab-h: 1.4rem; --doc-folder-tab-w: min(44%, 7.2rem); --doc-corner-cut: 0.9rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--gap-sm); width: 100%; max-width: 72rem; } .page-hero__folders .doc-folder { position: relative; display: flex; flex-direction: column; min-width: 0; } .page-hero__folders .doc-folder__tab { position: absolute; top: 0; left: 0; z-index: 2; width: var(--doc-folder-tab-w); height: var(--doc-folder-tab-h); --doc-fill: var(--color-card-bg-alt); } .page-hero__folders .doc-folder__tab.doc-corner-cut::after { bottom: calc(var(--doc-border-w, 1px) * -1); } .page-hero__folders .doc-folder__body { position: relative; z-index: 1; margin-top: calc(var(--doc-folder-tab-h) - 1px); width: 100%; min-height: clamp(3.2rem, 6vh, 4.5rem); padding: var(--gap-sm); --doc-fill: var(--color-bg-alt); } .page-hero__folders .doc-folder__body > * { position: relative; z-index: 1; } .page-hero__folders .doc-folder__stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-xxs); } .page-hero__folders .doc-folder__stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gap-sm); align-items: baseline; } .page-hero__folders .doc-folder__stat-value { font-size: var(--text-lg); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; color: var(--color-accent); line-height: 1; } .page-hero__folders .doc-folder__stat-label { font-size: var(--text-sm); color: var(--color-muted-alt); line-height: 1.4; } .page-hero__folders .doc-folder__lead { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--color-muted-alt); } /* ─────────────────────────────────────────────────────────────────────────── 3. .media-slot / .media-slot--body Personalized-image placeholder. Markup contract:
Imagen
Real image:
─────────────────────────────────────────────────────────────────────────── */ .media-slot { --doc-corner-cut: 0.9rem; --doc-fill: var(--color-card-bg-alt); position: relative; display: block; width: 100%; margin: 0; overflow: hidden; clip-path: polygon( 0 0, calc(100% - var(--doc-corner-cut)) 0, 100% var(--doc-corner-cut), 100% 100%, 0 100% ); background-color: var(--color-card-bg-alt); } .media-slot > img { display: block; width: 100%; max-width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .media-slot .ph--media, .media-slot .media-frame { width: 100%; aspect-ratio: 4 / 3; min-height: clamp(14rem, 28vw, 22rem); } .media-slot .media-frame { --doc-corner-cut: 0.9rem; clip-path: polygon( 0 0, calc(100% - var(--doc-corner-cut)) 0, 100% var(--doc-corner-cut), 100% 100%, 0 100% ); } .media-slot:has(.media-frame) { background-color: transparent; } .media-slot .media-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: none; /* cover already crops; skip intrinsic letterbox nudge */ } /* Hero-scale default (inside .page-hero__media) */ .page-hero__media .media-slot .ph--media, .page-hero__media .media-slot > img { aspect-ratio: 16 / 10; min-height: clamp(16rem, 32vw, 28rem); } /* In-section body variant — fits grid-60-40 splits */ .media-slot--body .ph--media, .media-slot--body .media-frame, .media-slot--body > img { aspect-ratio: 3 / 2; min-height: clamp(12rem, 24vw, 20rem); } /* ─────────────────────────────────────────────────────────────────────────── 3b. .editorial-media-rows — zigzag image + prose (1 media : 1 paragraph) Source: page-software-prevencion-de-riesgos.php #prev-integrada DOM order always media → text; --flip reverses on desktop only. ─────────────────────────────────────────────────────────────────────────── */ .editorial-media-rows { display: flex; flex-direction: column; gap: var(--gap-lg); width: 100%; } .editorial-media-rows__row { display: flex; flex-direction: row; align-items: center; gap: var(--gap-md); width: 100%; } .editorial-media-rows__row--flip { flex-direction: row-reverse; } .editorial-media-rows__media { flex: 1 1 0; min-width: 0; margin: 0; } .editorial-media-rows__text { flex: 1 1 0; min-width: 0; margin: 0; max-width: none; padding: 0; text-align: left; } .editorial-block > .editorial-media-rows { margin-top: 0; } @media (max-width: 768px) { .editorial-media-rows__row, .editorial-media-rows__row--flip { flex-direction: column; align-items: stretch; } } .sec--light .media-slot { --doc-fill: var(--color-card-bg-alt); background-color: var(--color-card-bg-alt); } .sec:not(.sec--light) .media-slot { --doc-fill: var(--color-card-bg); background-color: var(--color-card-bg); } /* Clean-wrapper override wins over the .media-slot fill above (same specificity, later in source) by qualifying with the section context. */ .sec--light .editorial-media-rows__media.media-slot, .sec:not(.sec--light) .editorial-media-rows__media.media-slot { clip-path: none; background-color: transparent; } /* ─────────────────────────────────────────────────────────────────────────── 4. .stat-strip Wide doc-folder bar with 2–4 stat cells. Supports data-live-count on nums. Markup: .stat-strip > .stat-strip__tab + .stat-strip__body > .stat-strip__cell* ─────────────────────────────────────────────────────────────────────────── */ .stat-strip { --doc-folder-tab-h: 1.4rem; --doc-folder-tab-w: min(22%, 7.2rem); --doc-corner-cut: 0.9rem; position: relative; width: 100%; background-color: var(--color-bg-alt); } .stat-strip__tab { position: absolute; top: 0; left: 0; z-index: 2; width: var(--doc-folder-tab-w); height: var(--doc-folder-tab-h); --doc-fill: var(--color-card-bg-alt); } .stat-strip__tab.doc-corner-cut::after { bottom: calc(var(--doc-border-w, 1px) * -1); } .stat-strip__body { position: relative; z-index: 1; margin-top: calc(var(--doc-folder-tab-h) - 1px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-md); padding: var(--gap-md); --doc-fill: var(--color-bg-alt); } .stat-strip__body > * { position: relative; z-index: 1; } .stat-strip__cell { display: flex; flex-direction: column; gap: var(--gap-xxs); min-width: 0; } .stat-strip__num { margin: 0; font-size: clamp(2.4rem, 2vw + 1.2rem, 3.6rem); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; color: var(--color-accent); } .stat-strip__label { margin: 0; font-size: var(--text-sm); line-height: 1.4; color: var(--color-muted-alt); } .stat-strip__cell--accredit { flex-direction: row; align-items: center; gap: var(--gap-sm); } .stat-strip__logo { display: block; width: auto; max-width: 100%; height: auto; max-height: clamp(3.2rem, 6vh, 4.8rem); object-fit: contain; flex-shrink: 0; } .stat-strip__cell--accredit .stat-strip__label { font-weight: var(--weight-semibold); color: var(--color-text-alt); } /* Beat .sec--light p (higher specificity) so nums stay accent green. */ .sec--light .stat-strip__num { color: var(--color-accent); } /* ─────────────────────────────────────────────────────────────────────────── 4b. .stats-folders — 4 homepage-style doc-folders in a row Markup: .stats-folders > .doc-folder.doc-folder--stat|accredit (×4) ─────────────────────────────────────────────────────────────────────────── */ .stats-folders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: var(--gap-sm); width: 100%; } .stats-folders .doc-folder { --doc-folder-tab-h: 1.4rem; --doc-folder-tab-w: min(44%, 7.2rem); --doc-corner-cut: 0.9rem; position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; } .stats-folders .doc-folder__tab { position: absolute; top: 0; left: 0; z-index: 2; width: var(--doc-folder-tab-w); height: var(--doc-folder-tab-h); --doc-fill: var(--color-card-bg-alt); } .stats-folders .doc-folder__tab.doc-corner-cut::after { bottom: calc(var(--doc-border-w, 1px) * -1); } .stats-folders .doc-folder__body { position: relative; z-index: 1; margin-top: calc(var(--doc-folder-tab-h) - 1px); flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--gap-xxs); min-height: 14rem; padding: var(--gap-sm); text-align: center; --doc-fill: var(--color-bg-alt); } .stats-folders .doc-folder__body > * { position: relative; z-index: 1; } .stats-folders .doc-folder__stat-value { display: block; margin: 0; font-family: var(--font-primary); font-size: clamp(2.4rem, 2vw + 1.2rem, 3.6rem); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; color: var(--color-accent); white-space: nowrap; } .stats-folders .doc-folder__stat-label { display: block; margin: 0; font-size: clamp(1.15rem, 0.95rem + 0.3vw, 1.35rem); font-weight: var(--weight-semibold); line-height: 1.25; color: var(--color-text-alt); } .stats-folders .doc-folder--accredit .doc-folder__body { gap: var(--gap-xs); } .stats-folders .doc-folder--accredit .doc-folder__isotipo { display: block; width: clamp(2.2rem, 3.5vh, 3rem); height: auto; aspect-ratio: 1; max-width: 70%; object-fit: contain; } .stats-folders .doc-folder__accredit { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.4; color: var(--color-text-alt); text-align: center; } @media (max-width: 1024px) { .stats-folders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-sm); } } @media (max-width: 640px) { .stats-folders { grid-template-columns: 1fr; } } .sec:not(.sec--light) .stat-strip__tab { --doc-fill: var(--color-surface); } .sec:not(.sec--light) .stat-strip__body { --doc-fill: var(--color-card-bg); } .sec:not(.sec--light) .stat-strip__label { color: var(--color-muted); } @media (max-width: 1024px) { .stat-strip__body { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .stat-strip__body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-sm); padding: var(--gap-sm); } } /* ─────────────────────────────────────────────────────────────────────────── 5. .folder-grid (+ --2 / --3 / --4) Doc-folder cells. Anatomy: .folder-grid__item > __tab + __body (h4 + text/ul) ─────────────────────────────────────────────────────────────────────────── */ .folder-grid { --doc-folder-tab-h: 1.4rem; --doc-folder-tab-w: min(40%, 6.4rem); --doc-corner-cut: 0.9rem; display: grid; gap: var(--gap-sm); width: 100%; align-items: stretch; /* Transparent so the editorial center spine shows through */ background-color: transparent; } .folder-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .folder-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .folder-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .folder-grid__item { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; } a.folder-grid__item { text-decoration: none; color: inherit; } .media-frame--muted { opacity: 0.72; } /* Para Equipos clientes — infinite horizontal doc-folder logo rail */ #pec-clientes .logo-rail { width: 100%; max-width: 100rem; margin-inline: auto; overflow: hidden; mask-image: linear-gradient( 90deg, transparent 0%, #000 6%, #000 94%, transparent 100% ); } #pec-clientes .logo-rail__viewport { overflow: hidden; width: 100%; } #pec-clientes .logo-rail__track { display: flex; width: max-content; gap: var(--gap-sm); animation: pec-logo-rail-scroll 42s linear infinite; } #pec-clientes .logo-rail__group { display: flex; flex: 0 0 auto; gap: var(--gap-sm); } #pec-clientes .logo-rail__doc { flex: 0 0 auto; width: clamp(14rem, 18vw, 18rem); height: auto; } #pec-clientes .logo-rail__doc .doc-folder__body { display: flex; align-items: center; justify-content: center; min-height: 10rem; padding: var(--gap-sm); } #pec-clientes .logo-rail__doc .ph.ph--logo { min-height: 6.4rem; width: 100%; border: none; border-radius: 0; background-color: color-mix(in srgb, var(--color-border-alt) 12%, var(--color-bg-alt)); padding: 0; } @keyframes pec-logo-rail-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - var(--gap-sm) / 2), 0, 0); } } @media (prefers-reduced-motion: reduce) { #pec-clientes .logo-rail__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; } #pec-clientes .logo-rail__group:last-child { display: none; } #pec-clientes .logo-rail { mask-image: none; } } /* Para Equipos testimonios — infinite quote docs (text / name / cargo shells) */ #pec-testimonios .quote-rail { width: 100%; max-width: 100rem; margin-inline: auto; overflow: hidden; mask-image: linear-gradient( 90deg, transparent 0%, #000 5%, #000 95%, transparent 100% ); } #pec-testimonios .quote-rail__viewport { overflow: hidden; width: 100%; } #pec-testimonios .quote-rail__track { display: flex; width: max-content; gap: var(--gap-md); animation: pec-quote-rail-scroll 56s linear infinite; } #pec-testimonios .quote-rail__group { display: flex; flex: 0 0 auto; gap: var(--gap-md); } #pec-testimonios .quote-rail__doc { flex: 0 0 auto; width: clamp(22rem, 28vw, 30rem); height: auto; } #pec-testimonios .quote-rail__doc .doc-folder__body { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: var(--gap-sm); min-height: 16rem; padding: var(--gap-md) var(--gap-sm); } #pec-testimonios .quote-rail__text { display: flex; flex-direction: column; gap: 0.7rem; flex: 1 1 auto; } #pec-testimonios .quote-rail__line { display: block; height: 0.7rem; width: 100%; border-radius: 0; background-color: color-mix(in srgb, var(--color-border-alt) 18%, var(--color-bg-alt)); } #pec-testimonios .quote-rail__line--short { width: 62%; } #pec-testimonios .quote-rail__name, #pec-testimonios .quote-rail__cargo { margin: 0; min-height: 1.1rem; width: 48%; background-color: color-mix(in srgb, var(--color-border-alt) 22%, var(--color-bg-alt)); } #pec-testimonios .quote-rail__cargo { width: 36%; min-height: 0.85rem; opacity: 0.85; } #pec-testimonios .quote-rail__name:not(:empty), #pec-testimonios .quote-rail__cargo:not(:empty) { background: none; min-height: 0; width: auto; color: var(--color-text-alt); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-tight, 1.25); } #pec-testimonios .quote-rail__cargo:not(:empty) { color: var(--color-muted-alt); font-weight: var(--weight-regular); font-size: var(--text-xs); } #pec-testimonios .quote-rail__text:has(> :not(.quote-rail__line)) .quote-rail__line { display: none; } @keyframes pec-quote-rail-scroll { from { transform: translate3d(calc(-50% - var(--gap-md) / 2), 0, 0); } to { transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: reduce) { #pec-testimonios .quote-rail__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; } #pec-testimonios .quote-rail__group:last-child { display: none; } #pec-testimonios .quote-rail { mask-image: none; } } .folder-grid__tab { position: absolute; top: 0; left: 0; z-index: 2; display: flex; align-items: center; width: var(--doc-folder-tab-w); height: var(--doc-folder-tab-h); padding-inline: var(--gap-xxs); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted-alt); /* Side/top stroke via border ring; bottom seam closed by ::after */ --doc-fill: var(--color-card-bg-alt); --doc-border-color: color-mix(in srgb, var(--color-border-alt) 40%, transparent); background-color: var(--doc-border-color); } .folder-grid__tab.doc-corner-cut::after { bottom: calc(var(--doc-border-w, 1px) * -1); background-color: var(--doc-fill); } .folder-grid__tab > span { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .folder-grid__body { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--gap-xxs); margin-top: calc(var(--doc-folder-tab-h) - 1px); padding: var(--gap-sm); --doc-fill: var(--color-bg-alt); border: none; transition: --doc-border-color 0.2s ease; } .folder-grid__body > * { position: relative; z-index: 1; } .folder-grid__item:hover .folder-grid__body { --doc-border-color: color-mix(in srgb, var(--color-border-alt) 50%, transparent); } .folder-grid__body h3, .folder-grid__body h4, .folder-grid__title { margin: 0 0 var(--gap-xxs); font-size: var(--text-md); font-weight: var(--weight-medium); line-height: var(--leading-tight, 1.25); letter-spacing: -0.01em; color: var(--color-text-alt); } .folder-grid__body p, .folder-grid__body li { margin: 0; padding: 0; font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-relaxed, 1.6); color: var(--color-muted-alt); } .folder-grid__body ul { display: flex; flex-direction: column; gap: var(--gap-xxs); list-style: none; margin: 0; padding: 0; } /* Optional green corner mark */ .folder-grid__body::before { content: ''; position: absolute; right: var(--gap-xxs); bottom: var(--gap-xxs); z-index: 2; width: var(--gap-xxs); height: var(--gap-xxs); pointer-events: none; background-color: var(--color-accent); opacity: 0.85; } /* Digi why / flagship why — titled folder tabs + H2 rail */ :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .editorial-block__title { max-width: min(100%, 72rem); margin-inline: auto; padding-top: calc(var(--gap-sm) + var(--gap-xxs)); } :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .folder-grid { --doc-folder-tab-h: 3.2rem; --doc-folder-tab-w: min(100%, 20rem); width: 100%; max-width: 100rem; margin-inline: auto; } :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .folder-grid__item > h3.folder-grid__tab.folder-grid__title { position: absolute; top: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; min-width: min(100%, 9rem); height: var(--doc-folder-tab-h); margin: 0; padding: 0 1.1rem; box-sizing: border-box; font-size: 1.5rem; font-weight: var(--weight-regular); letter-spacing: 0.01em; line-height: 1.2; text-transform: none; text-align: center; white-space: nowrap; color: var(--color-text-alt); --doc-fill: var(--color-card-bg-alt); } :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .folder-grid__item > h3.folder-grid__tab .folder-grid__tab-label { position: relative; z-index: 1; display: block; overflow: visible; text-overflow: unset; white-space: nowrap; font-size: inherit; font-weight: inherit; } :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .folder-grid__body { justify-content: center; } :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .folder-grid__body p { font-size: clamp(1.25rem, 1.1rem + 0.3vw, 1.5rem); line-height: 1.55; } :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .digi-beneficios__visual { display: flex; justify-content: center; width: 100%; margin-top: var(--gap-md); margin-bottom: 0; } :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .digi-beneficios__visual .editorial-anim--2b-mini { width: min(100%, 36rem); max-width: 36rem; } /* Mid CTA — section pad lg; top includes rail-mark stack so edge→square ≈ edge→button */ #digi-cta-mid { --editorial-pad-b: var(--gap-lg); --editorial-pad-t: calc(var(--gap-lg) + var(--gap-sm) + var(--gap-xxs)); } #digi-cta-mid .cta-dossier__heading { max-width: none; } /* Por qué — same title→cards air as Beneficios (.editorial-block gap-lg) */ :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .digi-why { display: flex; flex-direction: column; align-items: center; gap: var(--gap-lg); width: 100%; margin-top: var(--gap-lg); } :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .digi-why .editorial-block__title { max-width: min(100%, 72rem); /* Air comes from flex gap — do not add padding-bottom (mobile zeros it anyway) */ } /* Longer tab labels (e.g. Acreditado…) — allow wrap without clipping */ :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .digi-why .folder-grid { --doc-folder-tab-h: 3.6rem; } :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .digi-why .folder-grid__item > h3.folder-grid__tab.folder-grid__title { height: auto; min-height: var(--doc-folder-tab-h); white-space: normal; padding-block: 0.55rem; } :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .digi-why .folder-grid__item > h3.folder-grid__tab .folder-grid__tab-label { white-space: normal; text-wrap: balance; overflow: visible; text-overflow: unset; } /* Para Equipos Control — long H3 titles need wrap without .digi-why stack chrome */ #pec-control .folder-grid { --doc-folder-tab-h: 3.6rem; } #pec-control .folder-grid__item > h3.folder-grid__tab.folder-grid__title { height: auto; min-height: var(--doc-folder-tab-h); white-space: normal; padding-block: 0.55rem; max-width: 100%; } #pec-control .folder-grid__item > h3.folder-grid__tab .folder-grid__tab-label { white-space: normal; text-wrap: balance; overflow: visible; text-overflow: unset; } /* Fix 2 — mobile: flow tabs (no absolute) so wrapped labels never overlap body */ @media (max-width: 768px) { :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .folder-grid__item > h3.folder-grid__tab.folder-grid__title { position: relative; width: 100%; max-width: 100%; height: auto; min-height: var(--doc-folder-tab-h); white-space: normal; } :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .folder-grid__item > h3.folder-grid__tab .folder-grid__tab-label { white-space: normal; text-wrap: balance; overflow: visible; text-overflow: unset; } /* Full-width tab → square the body (same as digi-pasos / digi hero stats) */ :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .folder-grid__body { margin-top: -1px; clip-path: none; border: 1px solid color-mix(in srgb, var(--color-border-alt) 35%, transparent); border-radius: 0; background-color: var(--color-bg-alt); } :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .folder-grid__body.doc-corner-cut::after { display: none; } } /* Digi / Hoja / Evaluación why is its own section — no stacked margin under Beneficios */ :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #qs-valores) .digi-why { margin-top: 0; } /* Digi pasos — zigzag pipeline + light folder cards; compact under mid-CTA */ /* Digi pasos — section pad lg (same tier as other editorial sections) */ :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) { --editorial-pad-t: var(--gap-lg); --editorial-pad-b: var(--gap-lg); --doc-folder-tab-h: 3.6rem; --doc-folder-tab-w: min(100%, 20rem); --doc-corner-cut: 0.9rem; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .editorial-block__title { max-width: min(100%, 56rem); margin-inline: auto; /* Mask section spine through the title→pipeline gap */ padding-bottom: var(--gap-md); } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps { --pipeline-circle: 5.2rem; --pipeline-line: 1.5px; --dvm-fill: transparent; --dvm-fill-tint: var(--color-card-bg-alt); --dvm-border: color-mix(in srgb, var(--color-border-alt) 45%, transparent); --dvm-green: var(--color-accent); --dvm-ink: var(--color-text-alt); --dvm-muted: var(--color-muted-alt); --dvm-dim: var(--color-dim-alt); position: relative; z-index: 1; display: block; width: 100%; max-width: 100rem; margin-inline: auto; min-height: 0; padding: 0; border-radius: 0; background: transparent; overflow: visible; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__track { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: none; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__step { display: grid; grid-template-columns: minmax(0, 1fr) var(--pipeline-circle) minmax(0, 1fr); column-gap: var(--gap-md); align-items: center; width: 100%; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__node { grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; flex-shrink: 0; width: var(--pipeline-circle); height: var(--pipeline-circle); } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__circle { position: relative; width: var(--pipeline-circle); height: var(--pipeline-circle); border-radius: 50%; border: 1.5px solid var(--color-bg); background: var(--color-bg-alt); color: var(--color-bg); display: grid; place-items: center; box-sizing: border-box; box-shadow: none; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__circle::after { content: ''; position: absolute; inset: -0.45rem; border-radius: 50%; border: 1.5px solid var(--color-bg); opacity: 0; pointer-events: none; animation: digi-pasos-ring 2.8s ease-out infinite; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__step:nth-child(1) .doc-pipeline__circle::after { animation-delay: 0s; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__step:nth-child(3) .doc-pipeline__circle::after { animation-delay: 0.9s; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__step:nth-child(5) .doc-pipeline__circle::after { animation-delay: 1.8s; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__node--active .doc-pipeline__circle { border-color: var(--color-bg); color: var(--color-bg); background: var(--color-bg-alt); box-shadow: none; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__num { font-size: clamp(1.8rem, 1.2rem + 1vw, 2.4rem); font-weight: var(--weight-medium); letter-spacing: -0.03em; line-height: 1; } @keyframes digi-pasos-ring { 0% { transform: scale(0.92); opacity: 0.45; } 70% { opacity: 0.12; } 100% { transform: scale(1.28); opacity: 0; } } @media (prefers-reduced-motion: reduce) { :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__circle::after { animation: none; opacity: 0; } } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__copy { position: relative; z-index: 1; width: 100%; max-width: 36rem; padding: 0; background: transparent; box-shadow: none; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__step--right .doc-pipeline__copy { grid-column: 3; justify-self: start; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__step--left .doc-pipeline__copy { grid-column: 1; justify-self: end; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__copy > h3.folder-grid__tab.folder-grid__title { position: absolute; top: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; min-width: min(100%, 9rem); height: auto; min-height: var(--doc-folder-tab-h); margin: 0; padding: 0.55rem 1.1rem; box-sizing: border-box; font-size: 1.5rem; font-weight: var(--weight-regular); letter-spacing: 0.01em; line-height: 1.2; text-transform: none; text-align: center; white-space: normal; color: var(--color-text-alt); --doc-fill: var(--color-card-bg-alt); } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__copy > h3.folder-grid__tab .folder-grid__tab-label { position: relative; z-index: 1; display: block; overflow: visible; text-overflow: unset; white-space: normal; text-wrap: balance; font-size: inherit; font-weight: inherit; } /* Charlas Paso 1 — stretch tab across copy column so the long title uses available width */ #cpr-pasos .doc-pipeline--steps .doc-pipeline__step:nth-child(1) .doc-pipeline__copy > h3.folder-grid__tab.folder-grid__title { width: 100%; max-width: 100%; justify-content: flex-start; text-align: left; } #cpr-pasos .doc-pipeline--steps .doc-pipeline__step:nth-child(1) .doc-pipeline__copy > h3.folder-grid__tab .folder-grid__tab-label { width: 100%; text-wrap: unset; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__copy .folder-grid__body { justify-content: center; margin-top: calc(var(--doc-folder-tab-h) - 1px); } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__copy .folder-grid__body p { font-size: clamp(1.25rem, 1.1rem + 0.3vw, 1.5rem); line-height: 1.55; } /* Connector shares the same 3-col grid so the line sits on circle centers */ :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__connector { display: grid; grid-template-columns: minmax(0, 1fr) var(--pipeline-circle) minmax(0, 1fr); column-gap: var(--gap-md); width: 100%; height: var(--gap-sm); margin: 0; flex: none; background: transparent; position: relative; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__connector::before, :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__pulse { display: none; } @media (max-width: 768px) { /* Linear timeline: number → line → card (not zig-zag; keep numbered circles) */ :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) { --pipeline-circle: 3.2rem; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__track { display: flex; flex-direction: column; gap: 0; width: 100%; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__step { display: flex; flex-direction: column; align-items: center; /* Same air as connector below card — number sits centered in equal gaps */ gap: var(--gap-lg); width: 100%; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__slot { display: none; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__node { order: 1; display: flex; width: var(--pipeline-circle); height: var(--pipeline-circle); align-self: center; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__circle { width: var(--pipeline-circle); height: var(--pipeline-circle); } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__num { font-size: clamp(1.4rem, 1rem + 0.8vw, 1.8rem); } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__step--right .doc-pipeline__copy, :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__step--left .doc-pipeline__copy { order: 2; width: 100%; max-width: none; margin: 0; justify-self: stretch; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__connector { display: flex; justify-content: center; align-items: stretch; grid-template-columns: none; column-gap: 0; width: 100%; height: var(--gap-lg); margin: 0; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__connector::before { content: ''; display: block; width: 1px; height: 100%; background-color: var(--color-spine); opacity: 1; } /* Full-width tab → square the body (closed card, homepage pattern) */ :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__copy > h3.folder-grid__tab.folder-grid__title { position: relative; width: 100%; max-width: 100%; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__copy .folder-grid__body { margin-top: -1px; clip-path: none; border: 1px solid color-mix(in srgb, var(--color-border-alt) 35%, transparent); border-radius: 0; background-color: var(--color-bg-alt); } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__copy .folder-grid__body.doc-corner-cut::after { display: none; } :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline--steps .doc-pipeline__copy .folder-grid__body p { max-width: none; text-align: left; } } /* Digi Construcción — mark + title + lead share left column (same measure) */ .sec--plataforma.sec--editorial .editorial-block--define .editorial-block__def-col { gap: var(--gap-md); } .sec--plataforma.sec--editorial .editorial-block--define .editorial-block__def-col > .editorial-block__mark { display: block; width: clamp(5.6rem, 8vw, 8rem); height: auto; max-width: 8rem; object-fit: contain; margin: 0; align-self: flex-start; pointer-events: none; user-select: none; } .sec--plataforma.sec--editorial .editorial-block--define .editorial-block__def-col > .editorial-block__title { align-self: stretch; max-width: none; width: 100%; margin: 0; padding: 0; text-align: left; background-color: transparent; } .sec--plataforma.sec--editorial .editorial-block--define .editorial-block__def { text-align: left; max-width: none; } .sec--plataforma.sec--editorial .editorial-block--define .plataforma__media { --doc-corner-cut: 0.9rem; height: auto; min-height: clamp(14rem, 24vh, 20rem); margin-top: 0; clip-path: polygon( 0 0, calc(100% - var(--doc-corner-cut)) 0, 100% var(--doc-corner-cut), 100% 100%, 0 100% ); } .sec--plataforma.sec--editorial .editorial-block--define .plataforma__media::before, .sec--plataforma.sec--editorial .editorial-block--define .plataforma__media::after { content: none; } .sec:not(.sec--light) .folder-grid { background-color: transparent; } .sec:not(.sec--light) .folder-grid__tab { --doc-fill: var(--color-surface); --doc-border-color: color-mix(in srgb, var(--color-border) 50%, transparent); background-color: var(--doc-border-color); color: var(--color-muted); } .sec:not(.sec--light) .folder-grid__tab.doc-corner-cut::after { background-color: var(--doc-fill); } .sec:not(.sec--light) .folder-grid__body { --doc-fill: var(--color-card-bg); } .sec:not(.sec--light) .folder-grid__item:hover .folder-grid__body { --doc-border-color: color-mix(in srgb, var(--color-border) 55%, transparent); } .sec:not(.sec--light) .folder-grid__body h3, .sec:not(.sec--light) .folder-grid__body h4, .sec:not(.sec--light) .folder-grid__title { color: var(--color-text); } .sec:not(.sec--light) .folder-grid__body p, .sec:not(.sec--light) .folder-grid__body li { color: var(--color-muted); } @media (max-width: 1024px) { .folder-grid--4, .folder-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .folder-grid--4, .folder-grid--3, .folder-grid--2 { grid-template-columns: 1fr; } } /* ─────────────────────────────────────────────────────────────────────────── 6. .doc-status-list Checklist rows: green status square + text. Modifier --cols → 2-col ≥1024. Markup: ul.doc-status-list > li.doc-status-list__row.doc-status-list__row--ok ─────────────────────────────────────────────────────────────────────────── */ .doc-status-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-xs); background-color: transparent; } /* Pain / centered editorial stack: match .editorial-block__lead measure */ .editorial-block > .doc-status-list { width: 100%; max-width: 68ch; } /* Ley Documentos intro — ~70% of wrap rail */ #ley-docs .soluciones__intro > .wrap--wide > :is(h2, p) { max-width: 70%; } .sec:not(.sec--light) .doc-status-list { background-color: transparent; } .doc-status-list--cols { display: grid; grid-template-columns: 1fr; gap: var(--gap-xs); } @media (min-width: 1024px) { .doc-status-list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-sm); } } .doc-status-list__row { display: flex; align-items: flex-start; gap: var(--gap-sm); margin: 0; padding: var(--gap-xs) var(--gap-sm); border: 1px solid color-mix(in srgb, var(--color-border) 35%, transparent); border-radius: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); /* Mix against section field (opaque) — never transparent, or the spine cuts the copy */ background: color-mix(in srgb, var(--color-card-bg) 55%, var(--editorial-field, var(--color-bg))); } .doc-status-list__row::before { content: ''; flex-shrink: 0; width: var(--gap-xs); height: var(--gap-xs); margin-top: 0.45em; background-color: color-mix(in srgb, var(--color-border) 55%, transparent); transition: background-color var(--transition-fast), box-shadow var(--transition-fast); } .doc-status-list__row:hover::before, .doc-status-list__row:focus-within::before { background-color: var(--color-accent); box-shadow: 0 0 0.6rem color-mix(in srgb, var(--color-accent) 55%, transparent); } .doc-status-list__row--ok { color: var(--color-text); } .doc-status-list__row--ok::before { background-color: var(--color-accent); } .sec--light .doc-status-list__row { border-color: color-mix(in srgb, var(--color-border-alt) 22%, transparent); color: var(--color-muted-alt); background: color-mix(in srgb, var(--color-card-bg-alt) 55%, var(--editorial-field, var(--color-bg-alt))); } .sec--light .doc-status-list__row--ok { color: var(--color-text-alt); } .sec--light .doc-status-list__row::before { background-color: color-mix(in srgb, var(--color-border-alt) 40%, transparent); } .sec--light .doc-status-list__row:hover::before, .sec--light .doc-status-list__row:focus-within::before { background-color: var(--color-accent); box-shadow: 0 0 0.6rem color-mix(in srgb, var(--color-accent) 45%, transparent); } .sec--light .doc-status-list__row--ok::before { background-color: var(--color-accent); } /* ─────────────────────────────────────────────────────────────────────────── 7. .step-rail Numerals sit on the section spine (mask it). Folder body = single thin border + tip cut. Markup: .step-rail > .step-rail__item > (.step-rail__num + .step-rail__body) ─────────────────────────────────────────────────────────────────────────── */ .step-rail { --doc-corner-cut: 0.9rem; position: relative; display: flex; flex-direction: column; gap: var(--gap-md); width: 100%; max-width: none; margin-inline: 0; padding-block: var(--gap-sm); background-color: transparent; } .step-rail__item { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--gap-sm); align-items: start; width: 100%; } .step-rail__num { grid-column: 2; position: relative; z-index: 2; margin: 0; padding: var(--gap-xxs) var(--gap-xs); font-size: clamp(2.8rem, 3vw + 1rem, 4rem); font-weight: var(--weight-medium); letter-spacing: -0.03em; line-height: 1; color: var(--color-accent); background-color: var(--color-bg-alt); text-align: center; } .sec:not(.sec--light) .step-rail__num { background-color: var(--color-bg); } .step-rail__body { grid-column: 3; position: relative; z-index: 1; justify-self: start; width: 100%; max-width: 36rem; padding: var(--gap-sm); background-color: var(--color-bg-alt); /* Single border — clip tip; inset shadow so diagonal keeps a stroke */ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-alt) 35%, transparent); clip-path: polygon( 0 0, calc(100% - var(--doc-corner-cut)) 0, 100% var(--doc-corner-cut), 100% 100%, 0 100% ); } .step-rail__body > * { position: relative; z-index: 1; } .step-rail__title { margin: 0 0 var(--gap-xxs); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-text-alt); } .step-rail__text { margin: 0; font-size: var(--text-base); line-height: 1.65; color: var(--color-muted-alt); } .sec:not(.sec--light) .step-rail { background-color: transparent; } .sec:not(.sec--light) .step-rail__body { background-color: var(--color-card-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 40%, transparent); } .sec:not(.sec--light) .step-rail__title { color: var(--color-text); } .sec:not(.sec--light) .step-rail__text { color: var(--color-muted); } @media (max-width: 768px) { .step-rail__item { grid-template-columns: auto minmax(0, 1fr); gap: var(--gap-sm); } .step-rail__num { grid-column: 1; text-align: left; padding-inline: 0 var(--gap-xs); } .step-rail__body { grid-column: 2; max-width: none; } } @media (max-width: 480px) { .step-rail__item { grid-template-columns: 1fr; gap: var(--gap-xxs); } .step-rail__num, .step-rail__body { grid-column: 1; } } /* ─────────────────────────────────────────────────────────────────────────── 8. .doc-tabs Folder-tab tablist. JS: data-doc-tabs in main.js §7. Tip cut top-right; side/top stroke via border ring; active = fill contrast (no accent bar). Active tab has no bottom stroke (joins panel). ─────────────────────────────────────────────────────────────────────────── */ .doc-tabs { /* Folder-tab scale + tokens — mirrors .folder-grid__tab / __body so the tablist reads as manila folders (tab label on a folder body). */ --doc-folder-tab-h: 3.2rem; --doc-corner-cut: 0.9rem; --doc-border-w: 1px; --doc-border-color: color-mix(in srgb, var(--color-border-alt) 40%, transparent); --doc-tab-fill: var(--color-card-bg-alt); /* inactive tab face */ --doc-panel-fill: var(--color-bg-alt); /* active tab + folder body */ --doc-tab-color: var(--color-muted-alt); --doc-tab-color-active: var(--color-text-alt); width: 100%; } /* Dark sections: swap folder fills/text to the dark token set (one place). */ .sec:not(.sec--light) .doc-tabs { --doc-border-color: color-mix(in srgb, var(--color-border) 40%, transparent); --doc-tab-fill: var(--color-surface); --doc-panel-fill: var(--color-card-bg); --doc-tab-color: var(--color-muted); --doc-tab-color-active: var(--color-text); } .doc-tabs__list { display: flex; flex-wrap: nowrap; /* Stretch so all tabs match the tallest — long labels wrap without cutting off, and the folder tabs stay an even row. */ align-items: stretch; /* Separation — tabs read as distinct folders, not a joined strip. */ gap: var(--gap-xxs); width: 100%; padding-top: var(--gap-xxs); overflow-x: auto; /* Only horizontal scroll is intended; hidden-y kills the 1px vertical overflow (tab clip-path) that otherwise shows the green scrollbar thumb. */ overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* Optional H3 wrap — preserves source heading outline; button keeps folder look */ .doc-tabs__heading { display: flex; flex: 0 0 auto; align-items: stretch; margin: 0; padding: 0; max-width: 20rem; font-size: inherit; font-weight: inherit; line-height: inherit; } .doc-tabs__heading .doc-tabs__tab { width: 100%; max-width: none; } .doc-tabs__tab { position: relative; z-index: 1; isolation: isolate; flex: 0 0 auto; display: flex; align-items: center; min-width: 8rem; max-width: 20rem; /* min-height (not fixed height) so 2-line labels grow the tab instead of clipping; align-items:stretch on the list keeps the row even. */ min-height: var(--doc-folder-tab-h); height: auto; margin: 0; padding: var(--gap-xxs) var(--gap-sm); border: none; cursor: pointer; font-family: var(--font-primary); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.25; letter-spacing: 0.02em; text-align: left; color: var(--doc-tab-color); /* Border ring shows as a 1px frame; face is drawn by ::after. */ background-color: var(--doc-border-color); clip-path: polygon( 0 0, calc(100% - var(--doc-corner-cut)) 0, 100% var(--doc-corner-cut), 100% 100%, 0 100% ); transition: color 0.2s ease; } /* Inner face — folder-tab fill inside the border ring. */ .doc-tabs__tab::after { content: ''; position: absolute; top: var(--doc-border-w); right: var(--doc-border-w); bottom: 0; left: var(--doc-border-w); z-index: -1; background-color: var(--doc-tab-fill); clip-path: polygon( 0 0, calc(100% - calc(var(--doc-corner-cut) - var(--doc-border-w))) 0, 100% calc(var(--doc-corner-cut) - var(--doc-border-w)), 100% 100%, 0 100% ); pointer-events: none; transition: background-color 0.25s ease, bottom 0.25s ease; } .doc-tabs__tab.is-active, .doc-tabs__tab[aria-selected="true"] { z-index: 3; color: var(--doc-tab-color-active); } /* Active tab face = folder-body fill + bleeds 1px over the panel border so the tab and its panel read as one open folder. */ .doc-tabs__tab.is-active::after, .doc-tabs__tab[aria-selected="true"]::after { bottom: -1px; background-color: var(--doc-panel-fill); } /* Panel = folder body. Same doc-corner-cut anatomy as .folder-grid__body: 1px border ring + top-right tip cut, square corners (no radius), fill via ::before. isolation + negative-z fill keeps bare-text panel content on top. Only the active panel is in flow (no max-height guess) so the container snaps to real content height; it fades + rises in. */ .doc-tabs__panel { position: relative; isolation: isolate; margin-top: -1px; padding: var(--gap-md); color: var(--doc-tab-color-active); background-color: var(--doc-border-color); clip-path: polygon( 0 0, calc(100% - var(--doc-corner-cut)) 0, 100% var(--doc-corner-cut), 100% 100%, 0 100% ); } .doc-tabs__panel::before { content: ''; position: absolute; z-index: -1; inset: var(--doc-border-w); background-color: var(--doc-panel-fill); clip-path: polygon( 0 0, calc(100% - calc(var(--doc-corner-cut) - var(--doc-border-w))) 0, 100% calc(var(--doc-corner-cut) - var(--doc-border-w)), 100% 100%, 0 100% ); pointer-events: none; } .doc-tabs__panel:not(.is-active) { display: none; } .doc-tabs__panel.is-active { animation: docTabsPanelIn 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both; } @keyframes docTabsPanelIn { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: translateY(0); } } .doc-tabs__panel > *:first-child { margin-top: 0; } .doc-tabs__panel > *:last-child { margin-bottom: 0; } /* Clean checklist inside folder panels — green square + text, no row cards */ .doc-tabs__panel .doc-status-list { gap: var(--gap-xs); } .doc-tabs__panel .doc-status-list__row { border: none; background: transparent; padding: 0; gap: var(--gap-xs); color: var(--color-text-alt); } .doc-tabs__panel .doc-status-list__heading { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } .doc-tabs__panel .doc-status-list__row::before { width: var(--gap-xxs); height: var(--gap-xxs); margin-top: 0.4em; background-color: var(--color-accent); box-shadow: none; } .doc-tabs__panel .doc-status-list__row:hover::before, .doc-tabs__panel .doc-status-list__row:focus-within::before { background-color: var(--color-accent); box-shadow: none; } @media (prefers-reduced-motion: reduce) { .doc-tabs__panel.is-active { animation: none; } } @media (max-width: 768px) { .doc-tabs__list { padding-bottom: var(--gap-xxs); } .doc-tabs__tab { min-width: 7.2rem; } } /* ─────────────────────────────────────────────────────────────────────────── 9. .doc-index Static rows in a corner-cut frame. IDs match homepage soluciones__mark style. Markup: .doc-index.doc-corner-cut > .doc-index__row > (__id + __name + optional __meta) ─────────────────────────────────────────────────────────────────────────── */ .doc-index { --doc-corner-cut: 0.9rem; --doc-fill: var(--color-bg-alt); --doc-border-color: color-mix(in srgb, var(--color-border-alt) 35%, transparent); counter-reset: doc-index; position: relative; width: 100%; overflow: hidden; background-color: var(--doc-border-color); clip-path: polygon( 0 0, calc(100% - var(--doc-corner-cut)) 0, 100% var(--doc-corner-cut), 100% 100%, 0 100% ); } .doc-index::after { content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; z-index: 0; background-color: var(--doc-fill); clip-path: polygon( 0 0, calc(100% - calc(var(--doc-corner-cut) - 1px)) 0, 100% calc(var(--doc-corner-cut) - 1px), 100% 100%, 0 100% ); pointer-events: none; } .doc-index__row { counter-increment: doc-index; position: relative; z-index: 1; display: grid; grid-template-columns: 4.8rem minmax(0, 1fr) auto; gap: var(--gap-sm); align-items: center; padding: var(--gap-xs) var(--gap-sm); border-bottom: 1px solid color-mix(in srgb, var(--color-border-alt) 18%, transparent); font-size: var(--text-sm); } .doc-index__row:last-child { border-bottom: none; } .doc-index__id { display: flex; align-items: center; justify-content: center; width: 3.2rem; aspect-ratio: 1; font-family: var(--font-primary); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1; letter-spacing: 0; color: var(--color-accent); } .doc-index__id:empty::before { content: counter(doc-index, decimal-leading-zero); } .doc-index__name { min-width: 0; color: var(--color-text-alt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doc-index__meta { font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted-alt); text-align: right; } .sec:not(.sec--light) .doc-index { --doc-fill: var(--color-card-bg); --doc-border-color: color-mix(in srgb, var(--color-border) 40%, transparent); } .sec:not(.sec--light) .doc-index__row { border-bottom-color: color-mix(in srgb, var(--color-border) 22%, transparent); } .sec:not(.sec--light) .doc-index__name { color: var(--color-text); } .sec:not(.sec--light) .doc-index__meta { color: var(--color-muted); } @media (max-width: 768px) { .doc-index__row { grid-template-columns: 4rem minmax(0, 1fr); gap: var(--gap-xs); } .doc-index__meta { grid-column: 2; text-align: left; } } /* ─────────────────────────────────────────────────────────────────────────── 10. .faq-dossier--inner Homepage FAQ dossier look for inner pages. 1-col default; --cols → 2-col. Keep API: .faq-item, .faq-question[aria-expanded], .faq-answer, .is-open Markup: .faq-list.faq-dossier--inner[.faq-dossier--inner--cols] > .faq-item.faq-dossier__entry ─────────────────────────────────────────────────────────────────────────── */ .faq-dossier--inner { display: flex; flex-direction: column; gap: var(--gap-sm); width: 100%; max-width: 72rem; margin-inline: auto; } .faq-dossier--inner.faq-dossier--inner--cols { display: grid; grid-template-columns: 1fr; align-items: start; gap: var(--gap-md); } @media (min-width: 1024px) { .faq-dossier--inner.faq-dossier--inner--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .faq-dossier--inner .faq-item, .faq-dossier--inner .faq-item:first-child { border: none; } .faq-dossier--inner .faq-dossier__entry { --doc-corner-cut: 0.6rem; --doc-folder-tab-h: 1.1rem; --doc-folder-tab-w: min(28%, 5.6rem); position: relative; } .faq-dossier--inner .faq-dossier__tab { position: absolute; top: 0; left: 0; z-index: 2; width: var(--doc-folder-tab-w); height: var(--doc-folder-tab-h); --doc-fill: var(--color-card-bg-alt); --doc-border-color: color-mix(in srgb, var(--color-border-alt) 40%, transparent); } .faq-dossier--inner .faq-dossier__tab.doc-corner-cut::after { bottom: calc(var(--doc-border-w, 1px) * -1); } .faq-dossier--inner .faq-dossier__entry.is-open .faq-dossier__tab { /* Match body fill — no accent tint / no false “line” */ --doc-fill: var(--color-bg-alt); } .faq-dossier--inner .faq-dossier__body { position: relative; z-index: 1; margin-top: calc(var(--doc-folder-tab-h) - var(--doc-border-w, 1px)); --doc-fill: var(--color-bg-alt); display: flex; flex-direction: column; } .faq-dossier--inner .faq-dossier__body > * { position: relative; z-index: 1; } .faq-dossier--inner .faq-dossier__body .faq-question { align-items: center; width: 100%; padding: var(--gap-sm); font-size: var(--text-md); font-weight: var(--weight-regular); line-height: 1.45; color: var(--color-text-alt); gap: var(--gap-sm); } .faq-dossier--inner .faq-dossier__label { flex: 1; min-width: 0; } .faq-dossier--inner .faq-question__icon { width: 1.8rem; height: 1.8rem; flex-shrink: 0; color: var(--color-dim-alt); transform: rotate(0deg); transition: transform 0.25s ease, color 0.15s ease; } .faq-dossier--inner .faq-dossier__entry.is-open .faq-question__icon { transform: rotate(90deg); color: var(--color-accent); } .faq-dossier--inner .faq-dossier__body .faq-question:hover { color: var(--color-text-alt); } .faq-dossier--inner .faq-answer { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1); } .faq-dossier--inner .faq-answer > .faq-dossier__sheet { min-height: 0; overflow: hidden; } .faq-dossier--inner .faq-dossier__entry.is-open .faq-answer { grid-template-rows: 1fr; } .faq-dossier--inner .faq-dossier__sheet > p, .faq-dossier--inner .faq-dossier__sheet > div { padding: 0 var(--gap-sm) var(--gap-sm); } .faq-dossier--inner .faq-dossier__sheet p { margin: 0; font-size: var(--text-base); color: var(--color-dim-alt); line-height: 1.7; } .faq-dossier--inner .faq-dossier__sheet p + p { margin-top: var(--gap-sm); } .faq-dossier--inner .faq-dossier__sheet ul, .faq-dossier--inner .faq-dossier__sheet ol { list-style: none; margin: var(--gap-sm) 0 0; padding: 0 var(--gap-sm) var(--gap-sm); display: flex; flex-direction: column; gap: var(--gap-sm); } .faq-dossier--inner .faq-dossier__sheet li { display: grid; grid-template-columns: var(--gap-xs) minmax(0, 1fr); gap: var(--gap-sm); align-items: start; margin: 0; padding: 0; font-size: var(--text-base); color: var(--color-dim-alt); line-height: 1.7; } .faq-dossier--inner .faq-dossier__sheet li::before { content: ''; width: var(--gap-xs); height: var(--gap-xs); margin-top: 0.55em; flex-shrink: 0; background-color: var(--color-accent); } /* Dark section */ .sec:not(.sec--light) .faq-dossier--inner .faq-dossier__tab { --doc-fill: var(--color-surface); --doc-border-color: color-mix(in srgb, var(--color-border) 50%, transparent); } .sec:not(.sec--light) .faq-dossier--inner .faq-dossier__entry.is-open .faq-dossier__tab { --doc-fill: var(--color-card-bg); } .sec:not(.sec--light) .faq-dossier--inner .faq-dossier__body { --doc-fill: var(--color-card-bg); } .sec:not(.sec--light) .faq-dossier--inner .faq-dossier__body .faq-question { color: var(--color-text); } .sec:not(.sec--light) .faq-dossier--inner .faq-question__icon { color: var(--color-dim); } .sec:not(.sec--light) .faq-dossier--inner .faq-dossier__sheet p, .sec:not(.sec--light) .faq-dossier--inner .faq-dossier__sheet li { color: var(--color-muted); } @media (max-width: 640px) { .faq-dossier--inner .faq-dossier__body .faq-question { font-size: var(--text-base); } } /* ─────────────────────────────────────────────────────────────────────────── 11. .cta-dossier (+ --mid) Closing CTA without .is-front. Display h2; --mid uses content h2. Markup: .cta-dossier > (.cta-dossier__heading + __body + __actions + optional __visual) ─────────────────────────────────────────────────────────────────────────── */ .cta-dossier { --rail-mark: var(--gap-xxs); --rail-clear: var(--gap-sm); text-align: center; } /* Closing CTA section — same entrance air as FAQ (section-pad + rail-mark stack) */ .is-home-hero .sec--editorial:has(> .wrap--wide > .cta-dossier:not(.cta-dossier--mid)) { --editorial-pad-t: calc(var(--section-pad-t) + var(--gap-sm) + var(--gap-xxs)); --editorial-pad-b: var(--section-pad-b); padding-top: var(--editorial-pad-t); padding-bottom: var(--editorial-pad-b); } .cta-dossier__heading { position: relative; z-index: 1; max-width: 22ch; margin: 0 auto; padding: var(--gap-sm); font-size: var(--text-h2-display); font-weight: var(--weight-light, var(--weight-regular)); letter-spacing: var(--tracking-h2, -0.02em); line-height: var(--leading-h2, 1.15); color: var(--color-text-alt); text-wrap: balance; background-color: var(--editorial-field, var(--color-bg-alt)); } .cta-dossier__heading::before { content: ''; position: absolute; left: 50%; bottom: 100%; z-index: 1; width: 3px; height: var(--rail-clear); transform: translateX(-50%); pointer-events: none; background-color: var(--editorial-field, var(--color-bg-alt)); } .cta-dossier__heading::after { content: ''; position: absolute; left: 50%; bottom: calc(100% + var(--rail-clear)); z-index: 2; width: var(--rail-mark); height: var(--rail-mark); transform: translateX(-50%); pointer-events: none; background-color: var(--color-accent); } .cta-dossier__body { position: relative; z-index: 1; max-width: 52ch; margin: 0 auto; padding-inline: var(--gap-sm); font-size: var(--text-lg); line-height: 1.6; color: var(--color-muted-alt); background-color: var(--editorial-field, var(--color-bg-alt)); } .cta-dossier__actions { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; justify-content: stretch; width: 100%; max-width: none; margin-inline: 0; margin-bottom: 0; padding: 0; gap: 0; background-color: transparent; } .cta-dossier__actions > :first-child { justify-self: end; margin-inline-end: var(--gap-sm); } .cta-dossier__actions > :last-child { justify-self: start; margin-inline-start: var(--gap-sm); } .cta-dossier__actions > :only-child, .cta-dossier--mid .cta-dossier__actions > * { grid-column: 1 / -1; justify-self: center; margin-inline: 0; } .cta-dossier__visual { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: clamp(12rem, 18vw, 20rem); margin-top: calc(var(--gap-lg) - var(--gap-md)); overflow: visible; background-color: transparent; /* no side bands beside full-rail media */ } .cta-dossier__visual .media-frame { --doc-corner-cut: 0.9rem; width: 100%; max-width: 72rem; /* original size; side fill now transparent */ clip-path: polygon( 0 0, calc(100% - var(--doc-corner-cut)) 0, 100% var(--doc-corner-cut), 100% 100%, 0 100% ); } .cta-dossier__media { display: block; width: 100%; height: auto; object-fit: cover; pointer-events: none; user-select: none; } .cta-dossier__stack { display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); width: 100%; } .cta-dossier--mid .cta-dossier__heading { font-size: var(--text-h2); font-weight: var(--weight-h2, var(--weight-regular)); max-width: 28ch; } .cta-dossier--mid .cta-dossier__body { font-size: var(--text-md); margin-bottom: var(--gap-sm); } /* Dark section */ .sec:not(.sec--light) .cta-dossier__heading { color: var(--color-text); } .sec:not(.sec--light) .cta-dossier__heading::before { background-color: var(--editorial-field, var(--color-bg)); } .sec:not(.sec--light) .cta-dossier__body { color: var(--color-muted); } .sec:not(.sec--light) .cta-dossier__visual { background-color: var(--color-bg); } @media (max-width: 640px) { .cta-dossier__actions { grid-template-columns: 1fr; justify-items: center; gap: var(--gap-sm); } .cta-dossier__actions > :first-child, .cta-dossier__actions > :last-child { justify-self: center; margin-inline: 0; } .cta-dossier__visual { display: none; } /* Digi closing CTA — homepage cta-band--closing rhythm (gap-md, not inflated) */ .is-home-hero .cta-dossier:not(.cta-dossier--mid) .cta-dossier__stack, .is-home-hero .cta-dossier__stack { gap: var(--gap-md); } .is-home-hero .cta-dossier:not(.cta-dossier--mid) .cta-dossier__visual { display: none; } .is-home-hero .cta-dossier__actions { width: 100%; max-width: none; display: grid; grid-template-columns: 1fr; justify-items: stretch; margin-inline: 0; margin-bottom: var(--gap-md); padding: 0; gap: 0; background-color: transparent; } .is-home-hero .cta-dossier__actions .btn { width: 100%; max-width: none; justify-self: stretch; justify-content: center; } } /* * Digi mobile QA 4–9 (2026-07-20) — gaps, squares, CTA type. * Pasos linear stack lives with :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) rules above. */ @media (max-width: 768px) { /* 4 + 6 — qué-documentos: top air matches bottom rhythm under green mark */ .is-home-hero #que-documentos.soluciones { padding-top: calc(var(--soluciones-rhythm) + var(--gap-lg)); padding-bottom: calc(var(--soluciones-rhythm) + var(--gap-lg)); } .is-home-hero #que-documentos .soluciones__intro { margin-top: 0; margin-bottom: var(--gap-lg); padding-top: var(--gap-md); } .is-home-hero #que-documentos .soluciones__body { gap: var(--gap-lg); } .is-home-hero #que-documentos .soluciones__modules { gap: var(--gap-lg); } /* Define / incluye — stacked reading rhythm (not section-tier air) */ .is-home-hero .editorial-block--define .editorial-block__body { gap: var(--gap-sm); } .is-home-hero .editorial-block--define .editorial-block__def-col, .is-home-hero .editorial-block--define .editorial-block__doc { gap: var(--gap-sm); } /* 5 — smaller squares, top-aligned to first text line */ .is-home-hero .doc-status-list__row::before { width: var(--gap-xxs); height: var(--gap-xxs); margin-top: 0.3em; } .is-home-hero #que-documentos .soluciones__list li { align-items: flex-start; } .is-home-hero #que-documentos .soluciones__list-mark { width: var(--gap-xxs); height: var(--gap-xxs); margin-top: 0.35em; } .is-home-hero .folder-grid__body::before, .is-home-hero :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .folder-grid__body::before { width: 0.45rem; height: 0.45rem; top: var(--gap-xxs); right: var(--gap-xxs); bottom: auto; } .is-home-hero .editorial-block--incluye .doc-command--folder .doc-ico { width: 1.4rem; height: 1.4rem; align-self: flex-start; margin-top: 0.15em; } .is-home-hero .editorial-block--incluye .doc-command--folder .doc-command__row { align-items: flex-start; } /* Titles — no padding mask on mobile (spine shows in gaps only) */ .is-home-hero .editorial-block__title, .is-home-hero :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .editorial-block__title, .is-home-hero :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .editorial-block__title, .is-home-hero :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .digi-why .editorial-block__title, .is-home-hero .editorial-block--incluye .editorial-block__def-col > .editorial-block__title, .is-home-hero .sec--plataforma .editorial-block--define .editorial-block__def-col > .editorial-block__title { padding: 0; padding-bottom: 0; } /* Mid CTA — top pad absorbs rail-mark stack (optical T=B with bottom) */ #digi-cta-mid { --editorial-pad-b: var(--gap-lg); --editorial-pad-t: calc(var(--gap-lg) + var(--gap-sm) + var(--gap-xxs)); } #digi-cta-mid .cta-dossier__stack { gap: var(--gap-md); } #digi-cta-mid .cta-dossier__heading { font-size: clamp(2.4rem, 2vw + 1rem, 3.2rem); max-width: none; padding: var(--gap-sm); } #digi-cta-mid .cta-dossier__body { font-size: var(--text-md); max-width: 52ch; padding-inline: var(--gap-sm); padding-block: 0; margin-bottom: 0; } /* Closing CTA — type only; section pads live with FAQ (all breakpoints) */ .is-home-hero .cta-dossier:not(.cta-dossier--mid) .cta-dossier__heading { font-size: var(--text-h2-display); font-weight: var(--weight-light, var(--weight-regular)); max-width: 22ch; padding: var(--gap-sm); } .is-home-hero .cta-dossier:not(.cta-dossier--mid) .cta-dossier__body { font-size: var(--text-lg); max-width: 52ch; padding-inline: var(--gap-sm); padding-block: 0; margin-bottom: 0; } .is-home-hero .cta-dossier__actions .btn, .is-home-hero .editorial-block--define .cta-band__actions .btn { width: 100%; max-width: none; justify-self: stretch; justify-content: center; font-size: 1.35rem; padding: 1rem 1.6rem; white-space: normal; text-align: center; line-height: 1.3; box-sizing: border-box; } .is-home-hero .editorial-block--define .cta-band__actions { width: 100%; max-width: none; align-self: stretch; } /* Plataforma — left column measure (mark + title + lead) */ .is-home-hero .sec--plataforma .editorial-block--define .editorial-block__def-col > .editorial-block__title { text-align: left; max-width: none; width: 100%; margin-inline: 0; padding: 0; background-color: transparent; } .is-home-hero .sec--plataforma .editorial-block--define .editorial-block__def { text-align: left; max-width: none; padding: 0; background-color: transparent; } .is-home-hero .sec--plataforma .plataforma__media { min-height: clamp(18rem, 36vh, 26rem); } } /* * Digi mobile — no field masks under copy (spine shows through). * Mid-CTA keeps spine + green square rail. Titles: padding 0 (see QA block). */ @media (max-width: 768px) { .is-home-hero .editorial-block--define > .editorial-block__title, .is-home-hero .editorial-block--incluye .editorial-block__def-col > .editorial-block__title, .is-home-hero .editorial-block--define .editorial-block__def, .is-home-hero .editorial-block--incluye .editorial-block__def, .is-home-hero .editorial-block--define .doc-vocab-mock__title, .is-home-hero .editorial-block--incluye .doc-vocab-mock__title { position: relative; z-index: 1; background-color: transparent; } .is-home-hero .editorial-block--incluye .editorial-block__def-col > .editorial-block__title { background-color: transparent; text-align: left; max-width: none; padding: 0; } .is-home-hero .editorial-block--define .cta-band__actions { position: relative; z-index: 1; background-color: transparent; } .is-home-hero .editorial-block--define .media-frame, .is-home-hero .editorial-block--define .doc-folder, .is-home-hero .editorial-block--incluye .doc-folder { position: relative; z-index: 1; } .is-home-hero .sec.sec--editorial:not(.sec--light):not(#digi-cta-mid) .editorial-block__title, .is-home-hero .sec.sec--editorial:not(.sec--light):not(#digi-cta-mid) .editorial-block__lead, .is-home-hero .sec.sec--editorial:not(.sec--light):not(#digi-cta-mid) .doc-status-list { position: relative; z-index: 1; background-color: transparent; } .is-home-hero :is(#digi-why, #hoja-why, #eval-why, #prev-why, #audit-why, #f30-why, #pts-why, #rio-why, #cp-why, #sco-why, #sfd-why, #sgc-why, #cpr-why, #crt-why, #cdo-why, #ley-why, #pec-control, #qs-valores) .folder-grid__item, .is-home-hero :is(#digi-pasos, #hoja-pasos, #eval-pasos, #prev-pasos, #audit-pasos, #f30-pasos, #pts-pasos, #rio-pasos, #cp-pasos, #sco-pasos, #sfd-pasos, #sgc-pasos, #cpr-pasos, #crt-pasos, #cdo-pasos, #ley-pasos) .doc-pipeline__copy { position: relative; z-index: 1; } /* Closing CTA keeps homepage rail; actions stay transparent like cta-band */ .is-home-hero .cta-dossier:not(.cta-dossier--mid) .cta-dossier__heading, .is-home-hero .cta-dossier:not(.cta-dossier--mid) .cta-dossier__body { position: relative; z-index: 1; } .is-home-hero .cta-dossier:not(.cta-dossier--mid) .cta-dossier__actions { background-color: transparent; padding: 0; } .is-home-hero .faq.faq--dossier .faq-dossier, .is-home-hero .faq.faq--dossier > .wrap--wide > h2 { position: relative; z-index: 1; background-color: transparent; } }