/* Synaxis Blocks — e.Republic Block Edition demo
   Brand tokens: teal #005460 · tealLight #e5f3f3 · tealMid #047889 · slate #29333f · btn #ff5002 */

/* ---- Full-bleed: neutralise the theme page wrapper on this page only ---- */
.sxs-block-page .contenedor2 { max-width: none !important; padding: 0 !important; width: 100%; }
.sxs-block-page .contenedor2 > h1 { display: none !important; } /* hide template page title; hero carries the real H1 */
.sxs-block-page .entry-content { max-width: none !important; width: 100%; margin: 0 !important; }
.sxs-block-page .entry-content > * { margin-top: 0; margin-bottom: 0; }
.sxs-block-page .entry-content .alignfull { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }

/* ---- Heading font fidelity ----
   Original theme: h1/h2 opt INTO Roboto Slab via an explicit "font-display" class;
   h3s (card/tile titles) have no such class and render in the body font (Roboto, weight 300).
   Our block markup has no Tailwind config to resolve "font-display" the same way for h3,
   so h3 was falling through to the block-theme default heading font (Roboto Slab). Force
   parity with the original's actual computed style here. */
body.sxs-block-page .entry-content h3.wp-block-heading { font-family: 'Roboto', sans-serif !important; font-weight: 300 !important; }

/* ---- Cascade fix: theme.css's `.page-template-default .entry-content h1..h6/p/ul` rules
   (2 classes + 1 type = higher specificity than our plain 2-class utility selectors, e.g.
   `.sxs-block-page .sxs-h2`) inject blog-post margins (headings: mt16/mb24, p: mb16, ul: mb16)
   onto every heading/paragraph/list inside our block content — even where our own class already
   sets an explicit margin. This is the single biggest source of "block edition renders taller":
   ~16-40px of unwanted margin stacking on nearly every heading and paragraph across every section.
   Fix: re-scope every margin-bearing rule below through `.entry-content` + the element's own tag,
   which raises the class-count above the theme's, so it wins on specificity alone (no !important
   needed, but kept for defensive parity with the rest of this file). ---- */
.sxs-block-page .entry-content h2.sxs-h2 { margin: 0 0 .5rem !important; }
.sxs-block-page .entry-content p.sxs-lead { margin: 1rem auto 0 !important; }
.sxs-block-page .entry-content h3.sxs-card-title { margin: 0 0 .3rem !important; }
.sxs-block-page .entry-content p.sxs-card-desc { margin: 0 !important; }
.sxs-block-page .entry-content h3.sxs-acard-title { margin: 0 0 auto !important; }
.sxs-block-page .entry-content p.sxs-acard-link { margin: 24px 0 0 !important; }
.sxs-block-page .entry-content h2.sxs-quote { margin: 0 auto !important; }
.sxs-block-page .entry-content p.sxs-quote-name { margin: 1.25rem 0 0 !important; }
.sxs-block-page .entry-content p.sxs-quote-role { margin: .1rem 0 0 !important; }
.sxs-block-page .entry-content h3.sxs-post-title { margin: 8px 0 0 !important; }
.sxs-block-page .entry-content p.sxs-post-exc { margin: 8px 0 0 !important; }
.sxs-block-page .entry-content p.sxs-post-link { margin: 12px auto 0 !important; }
.sxs-block-page .entry-content h2.wp-block-heading.font-display.text-white.text-2xl { margin: 0 !important; }
.sxs-block-page .entry-content ul.sxs-checklist { margin: 1rem 0 1.5rem !important; }
.sxs-block-page .entry-content h1.sxs-hero-title { margin: 0 auto !important; }

/* ---- Section rhythm ---- */
.sxs-block-page .sxs-section { padding: 4rem 0; }
/* Heading→grid gaps: original's real computed margin-top per grid, measured via getComputedStyle
   against https://erepublic.squirrel-corn.ts.net/ — NOT a flat "tighten" hack (an earlier pass
   here flattened both to a guessed 32px/28px, which undershot every grid that actually uses the
   real Tailwind mt-10 (40px) / mt-12 (48px) spacing scale). Scoped per grid because the two "mt-10"
   instances on this page target different original elements with different real values (the
   Latest section's insights columns visually correspond to the original's mt-12/48px grid, despite
   our markup naming the wrapper class mt-10). */
.sxs-block-page .sxs-grid.mt-12 { margin-top: 48px !important; } /* Fueling Transformation cards */
.sxs-block-page .sxs-grid.mt-10 { margin-top: 40px !important; } /* How We Can Help audience cards */
.sxs-block-page .sxs-insights-cols.mt-10 { margin-top: 48px !important; } /* Latest from e.Republic */
/* ---- Video section (YouTube embed) — sits between manifesto and audiences, matching original ---- */
.sxs-block-page .sxs-video-sec { padding: 0; }
.sxs-block-page .sxs-video { max-width: 56rem; margin: 0 auto; padding: 0 1.5rem; }
.sxs-block-page .sxs-video iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; border-radius: .5rem; }
/* Manifesto section: original measured padding is the same 64px/64px as every other default
   section (no actual "tight" reduction) — the previous 3rem value undershot by 32px total. */
.sxs-block-page .sxs-section--tight { padding: 4rem 0; }
/* Original's manifesto paragraph is NOT narrowed (full ~1104px container width, wraps to 3 lines);
   our sxs-lead/sxs-narrow max-width tug-of-war was forcing a 4th wrap line (+28px). Let it run full width here. */
.sxs-block-page .sxs-section--tight .sxs-lead { max-width: none !important; }
.sxs-block-page .sxs-container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.sxs-block-page .sxs-narrow { max-width: 46rem; }
/* Section H2 — original renders 30px / line-height 36px (Roboto Slab 300) */
.sxs-block-page .sxs-h2 { font-size: clamp(1.6rem, 2.6vw, 1.875rem) !important; line-height: 2.25rem !important; color: #0f172a; margin: 0 0 .5rem; }
.sxs-block-page .bg-brand-teal .sxs-h2, .sxs-block-page .bg-brand-slate .sxs-h2 { color: #fff; }
/* Lead paragraph — original 18px / 28px */
.sxs-block-page .sxs-lead { font-size: 18px !important; color: #475569; margin: .5rem auto 0; max-width: 52rem; line-height: 28px !important; }
.sxs-block-page .text-white .sxs-lead, .sxs-block-page .bg-brand-teal .sxs-lead { color: #e5f3f3; }

/* ---- Hero (core/cover with video bg) ---- */
.sxs-block-page .sxs-hero { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 2rem; }
.sxs-block-page .sxs-hero .wp-block-cover__background { position: absolute; inset: 0; background: #0b1720; }
.sxs-block-page .sxs-hero .wp-block-cover__video-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sxs-block-page .sxs-hero .wp-block-cover__inner-container { position: absolute; inset: 0; z-index: 1; width: 100%; max-width: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; }
/* Pull the hero up to sit directly under the fixed header (match original: heroTop ~140px, not ~300px) */
@media (min-width: 782px){ .sxs-block-page .sxs-hero { margin-top: -160px; } }
/* Hero H1 — original: 48px / line-height 52.8px, Roboto Slab 300, ~1088px wide */
.sxs-block-page .sxs-hero-title { color: #fff !important; font-weight: 300 !important; font-size: clamp(2.2rem, 4.2vw, 3rem) !important; line-height: 1.1 !important; margin: 0 auto; max-width: 68rem; text-shadow: 0 12px 30px rgba(0,0,0,.35); }
.sxs-block-page .sxs-hero-sub { color: #fff; opacity: .95; font-size: clamp(1.05rem, 2.2vw, 1.4rem); max-width: 48rem; margin: 1.1rem auto 0; }

/* ---- Hero carousel controls (static, at-rest visual parity — not functional) ---- */
.sxs-block-page .sxs-hero-controls { position: static; }
.sxs-block-page .sxs-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 9999px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18); z-index: 3; }
.sxs-block-page .sxs-hero-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border-top: 3px solid #ff5002; border-right: 3px solid #ff5002; }
.sxs-block-page .sxs-hero-arrow--prev { left: 2.2rem; }
.sxs-block-page .sxs-hero-arrow--prev::before { transform: translate(-30%,-50%) rotate(-135deg); }
.sxs-block-page .sxs-hero-arrow--next { right: 2.2rem; }
.sxs-block-page .sxs-hero-arrow--next::before { transform: translate(-70%,-50%) rotate(45deg); }
.sxs-block-page .sxs-hero-dots { position: absolute; left: 0; right: 0; bottom: 1.6rem; display: flex; gap: .55rem; justify-content: center; z-index: 3; }
.sxs-block-page .sxs-hero-dots i { width: 11px; height: 11px; border-radius: 9999px; background: rgba(127,224,216,.55); display: block; }
.sxs-block-page .sxs-hero-dots i.is-active { background: #7fe0d8; }
@media (max-width: 781px){ .sxs-block-page .sxs-hero-arrow { width: 42px; height: 42px; } .sxs-block-page .sxs-hero-arrow--prev { left: .6rem; } .sxs-block-page .sxs-hero-arrow--next { right: .6rem; } }

/* ---- Brand logo strip ---- */
.sxs-block-page .bg-brand-slate { background: #29333f; }
/* Original logo band uses 48px (py-12) vertical padding, not the 64px section default */
.sxs-block-page .sxs-section.bg-brand-slate { padding-top: 48px; padding-bottom: 48px; }
/* Original renders this heading at 30px/32px Roboto (not Roboto Slab) in tealLight, despite
   its "font-display" class — a more specific legacy selector wins there. Match the rendered
   result directly. */
.sxs-block-page .bg-brand-slate .wp-block-heading { font-family: 'Roboto', sans-serif !important; font-weight: 300 !important; font-size: 30px !important; line-height: 32px !important; color: #e5f3f3 !important; }
.sxs-block-page .bg-brand-teal  { background: #005460; }
/* Theme style.css ships `.bg-brand-tealLight { background: none !important }` — beat it with
   equal !important + higher specificity so the tealLight section bands (Latest, Newsletter) render. */
.sxs-block-page .bg-brand-tealLight { background: #e5f3f3 !important; }
.sxs-block-page .bg-slate-50 { background: #f8fafc; }
.sxs-block-page .sxs-logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.75rem; margin: 2rem auto 0; max-width: 72rem; padding: 0 1.5rem; }
.sxs-block-page .sxs-logo { margin: 0; }
.sxs-block-page .sxs-logo img { height: 48px; width: auto; object-fit: contain; } /* original: h-12 = 48px */

/* ---- Grids (authoritative; independent of Tailwind Play CDN timing) ---- */
.sxs-block-page .sxs-grid { display: grid !important; gap: 1.5rem; grid-template-columns: 1fr; }
/* Classic-theme group blocks wrap children in an inner-container; dissolve it so flex/grid parents see the real children */
.sxs-block-page .wp-block-group__inner-container { display: contents; }
@media (min-width: 640px){ .sxs-block-page .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (min-width: 768px){ .sxs-block-page .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
                           .sxs-block-page .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (min-width: 1024px){ .sxs-block-page .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
                            .sxs-block-page .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }

/* ---- Service cards ---- (original: border #e2e8f0, radius 8px, padding 24px, shadow-sm) */
.sxs-block-page .sxs-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
/* Icon in a 40px pale-teal circle (original: div.h-10.w-10.rounded-full.bg-brand-tealLight) */
.sxs-block-page .sxs-icon { display: flex; width: 40px; height: 40px; border-radius: 9999px; background: #e5f3f3; align-items: center; justify-content: center; margin: 0 0 1rem; }
.sxs-block-page .sxs-icon-img { margin: 0; }
.sxs-block-page .sxs-icon-img img { width: 40px; height: 40px; object-fit: contain; display: block; }
.sxs-block-page .sxs-card-title { font-size: 20px !important; line-height: 28px !important; color: #0f172a; margin: 0 0 .3rem; }
.sxs-block-page .sxs-card-desc { color: #64748b; font-size: 16px !important; margin: 0; line-height: 24px !important; }

/* ---- Audience cards (horizontal: text left, image right, orange circle-arrow) ---- */
.sxs-block-page .sxs-acard { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; display: flex; align-items: stretch; height: 162px; }
.sxs-block-page .sxs-acard-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 24px; }
.sxs-block-page .sxs-acard-title { font-size: 18px !important; line-height: 28px !important; color: #0f172a; margin: 0 0 auto; }
.sxs-block-page .sxs-acard-link { margin: 24px 0 0; }
/* Original: 28px orange circle (h-7 w-7) with a thin arrow glyph */
.sxs-block-page .sxs-acard-link a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px; background: #ff5002; color: #fff; font-size: 15px; line-height: 1; text-decoration: none; }
.sxs-block-page .sxs-acard-link a:hover { background: #ee4801; }
.sxs-block-page .sxs-acard-img { margin: 0; flex: 0 0 160px; }
.sxs-block-page .sxs-acard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sxs-block-page .sxs-post-link a { color: #367788; font-weight: 600; text-decoration: none; }
@media (max-width: 781px){ .sxs-block-page .sxs-acard { min-height: 150px; } }

/* ---- Testimonial ---- */
.sxs-block-page .sxs-quote-icon { margin: 0 auto 1rem; }
.sxs-block-page .sxs-quote-icon img { width: 96px; height: 96px; border-radius: 9999px; border: 4px solid rgba(255,255,255,.3); object-fit: cover; }
.sxs-block-page .sxs-quote { font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: #0f172a; font-weight: 500; line-height: 1.4; margin: 0 auto; max-width: 46rem; }
.sxs-block-page .sxs-quote-name { margin: 1.25rem 0 0; color: #0f172a; }
.sxs-block-page .sxs-quote-role { margin: .1rem 0 0; color: #64748b; font-size: .95rem; }

/* ---- Insights / "Latest" — 2 independent flex columns (masonry stagger), matching original ---- */
.sxs-block-page .sxs-insights-cols { display: flex; gap: 1.5rem; align-items: flex-start; }
.sxs-block-page .sxs-insights-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
@media (max-width: 781px){ .sxs-block-page .sxs-insights-cols { flex-direction: column; } }
/* Card: white, rounded-xl, no border, shadow-sm, 24px padding, centered (original .tarjeta.rounded-xl.shadow-sm.p-6) */
.sxs-block-page .sxs-post { background: #fff; border: 0; border-radius: 12px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); overflow: visible; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; }
.sxs-block-page .sxs-post-img { margin: 0 auto; width: 100%; max-width: 384px; }
.sxs-block-page .sxs-post-img img { width: 100%; height: 192px; object-fit: cover; border-radius: 8px; display: block; }
/* teal circle icon for text tiles (original: 48px bg-brand-teal/80 circle, white icon) */
.sxs-block-page .sxs-post-badge { width: 48px; height: 48px; border-radius: 9999px; background: rgba(0,84,96,.85); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; }
.sxs-block-page .sxs-post-badge svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; }
.sxs-block-page .sxs-post-title { font-size: 20px !important; line-height: 28px !important; color: #0f172a; margin: 8px 0 0; }
.sxs-block-page .sxs-post-exc { color: #475569; font-size: 16px; margin: 8px 0 0; line-height: 24px; }
.sxs-block-page .sxs-post-link { margin: 12px auto 0; }
.sxs-block-page .sxs-post-link a { display: inline-flex; align-items: center; justify-content: center; color: #ff5002; }
.sxs-block-page .sxs-post-link a svg { width: 26px; height: 26px; fill: none; stroke: #ff5002; stroke-width: 2; }

/* ---- Workplace ---- */
/* Gutenberg's default block-spacing preset adds a 28px margin-bottom to wp-block-columns; the
   original's equivalent (a bare div.grid, not a Columns block) has none — that stray 28px alone
   accounted for most of this section's overage. */
.sxs-block-page .sxs-wp-cols { gap: 3rem; align-items: center; margin-bottom: 0 !important; }
.sxs-block-page .sxs-wp-col:has(.sxs-badge) { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sxs-block-page .sxs-wp-photo { margin: 0; width: 100%; }
.sxs-block-page .sxs-wp-photo img { width: 100%; border-radius: .85rem; object-fit: cover; display: block; }
/* badge sits under the photo collage, centered, matching original's "center mar_t_3 mt-6 h-20 w-auto" */
.sxs-block-page .sxs-badge { margin: 1.875rem auto 0; }
.sxs-block-page .sxs-badge img { height: 80px; width: auto; margin: 0 auto; display: block; }
.sxs-block-page .sxs-checklist { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
/* Theme ships `.page-template-default .entry-content ul li { list-style: disc }` (theme.css) which
   out-specifies a plain `.sxs-checklist{list-style:none}` on the ul (same cascade gotcha as
   bg-brand-tealLight) — the bullet was showing through next to the checkmark. Kill the marker
   directly on the li with matching specificity + !important, and lay it out like the original's
   span-badge + text row (original: li.flex.items-center.gap-3 > span.h-6.w-6.rounded-full.bg-brand-tealLight > svg.h-4.w-4.text-brand-tealMid). */
.sxs-block-page .entry-content .sxs-checklist li,
.sxs-block-page .sxs-checklist li { list-style: none !important; display: flex; align-items: center; gap: .75rem; padding-left: 0; margin: .5rem 0; color: #334155; font-size: 16px; line-height: 24px; }
.sxs-block-page .sxs-checklist li::before { content: none; }
.sxs-block-page .sxs-checklist li::marker { content: none; }
.sxs-block-page .sxs-check-badge { display: flex; flex: 0 0 24px; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 9999px; background: #e5f3f3; }
.sxs-block-page .sxs-check-icon { width: 16px; height: 16px; color: #047889; }
/* "Amazing Workplace Certified" inline link — original renders bold + underlined in brand teal.
   Theme's `.page-template-default .entry-content a { color:#498182 }` out-specifies a bare
   `.sxs-link` rule (same cascade gotcha again) — bump specificity + !important to land the exact
   measured original color. */
.sxs-block-page .entry-content .sxs-link,
.sxs-block-page .entry-content .sxs-link:visited { color: #367788 !important; font-weight: 700 !important; text-decoration: underline !important; }
.sxs-block-page .entry-content .sxs-link:hover { color: #2c616f !important; }

/* ---- Buttons ---- */
.sxs-block-page .wp-block-button__link,
.sxs-block-page .wp-block-button__link:visited,
.sxs-block-page .wp-block-button__link:hover,
.sxs-block-page .wp-block-button__link:focus { background: #ff5002; color: #fff !important; border-radius: 8px; padding: .85rem 1.7rem; font-weight: 500; letter-spacing: normal; line-height: 1 !important; text-transform: uppercase; font-size: 14px; display: inline-block; text-decoration: none !important; border: 2px solid transparent; }
.sxs-block-page .wp-block-button__link:hover { background: #ee4801; }
.sxs-block-page .is-style-outline .wp-block-button__link, .sxs-block-page .bg-brand-tealLight .wp-block-button__link { background: #ff5002; }

/* ---- Newsletter decorative arcs (match original) ---- */
.sxs-block-page .sxs-newsletter { position: relative; overflow: hidden; }
/* Original's button sits in a wrapper with ~20px margin-top (.mar_t_2); our Buttons block has none. */
.sxs-block-page .sxs-newsletter .wp-block-buttons { margin-top: 16px !important; }
/* Original newsletter heading is one line (~848px); widen the narrow container so it doesn't wrap */
.sxs-block-page .sxs-newsletter .sxs-narrow { max-width: 56rem; }
.sxs-block-page .sxs-newsletter .sxs-container { position: relative; z-index: 2; }
.sxs-block-page .sxs-nl-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sxs-block-page .sxs-nl-arc { position: absolute; border-radius: 9999px; }
/* left orange ring arc */
.sxs-block-page .sxs-nl-arc--left { left: -150px; top: -70px; width: 340px; height: 340px; background: #fd5206; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 90px), #000 calc(100% - 90px)); mask: radial-gradient(farthest-side, transparent calc(100% - 90px), #000 calc(100% - 90px)); }
/* left teal dot */
.sxs-block-page .sxs-nl-dot { position: absolute; left: 34px; top: 66px; width: 66px; height: 66px; border-radius: 9999px; background: #7fe0d8; }
/* right teal+orange ring */
.sxs-block-page .sxs-nl-arc--right { right: -120px; bottom: -150px; width: 360px; height: 360px; background: conic-gradient(from 90deg, #fd5206 0 50%, #005460 50% 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 62px), #000 calc(100% - 62px)); mask: radial-gradient(farthest-side, transparent calc(100% - 62px), #000 calc(100% - 62px)); }
@media (max-width: 781px){ .sxs-block-page .sxs-nl-arc--left { width: 200px; height: 200px; left: -110px; } .sxs-block-page .sxs-nl-arc--right { width: 220px; height: 220px; } .sxs-block-page .sxs-nl-dot { display: none; } }

/* ---- Responsive columns fallback ---- */
@media (max-width: 781px){
  .sxs-block-page .sxs-wp-cols { display: block; }
  .sxs-block-page .sxs-wp-cols .wp-block-column { margin: 0 0 1.5rem; }
}

/* Teal testimonial band — original has generous vertical padding (~525px section) */
.sxs-block-page .sxs-testimonial-sec { padding-top: 8rem; padding-bottom: 8rem; }
.sxs-block-page .sxs-testimonial-sec .sxs-quote{color:#fff;}
.sxs-block-page .sxs-testimonial-sec .sxs-quote-name{color:#fff;}
.sxs-block-page .sxs-testimonial-sec .sxs-quote-role{color:#cfe9e9;}