/* shared/faq-list.css */
/**
 * FaqList.tsx — the native <details> accordion.
 *
 * Shared, not per block: the homepage FAQ, the inner-page accordion and the FAQ hub groups all
 * render the same list, so they all enqueue this one handle (see storagbogota_block_shared_styles).
 */
.sb-faq-list{background:white;border:1px solid var(--sb-line);border-radius:16px;padding-inline:28px}
.sb-faq-list details+details{border-top:1px solid var(--sb-line)}
.sb-faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-inline:-8px;padding:24px 8px;border-radius:var(--sb-r-md);cursor:pointer}
.sb-faq-list summary::-webkit-details-marker{display:none}
.sb-faq-list summary h3{font-family:Inter,system-ui,sans-serif;font-size:18px;font-weight:600;line-height:28px;letter-spacing:normal;color:var(--sb-ink);transition:color var(--sb-d-fast) var(--sb-ease)}
.sb-faq-list summary>span{display:flex;flex-shrink:0;color:var(--sb-muted);transition:transform var(--sb-d) var(--sb-ease),color var(--sb-d) var(--sb-ease)}
.sb-faq-list summary .sb-icon{width:18px;height:18px}
.sb-faq-list details:hover summary h3,.sb-faq-list details:hover summary>span{color:var(--sb-primary)}
.sb-faq-list [open] summary>span{transform:rotate(45deg)}
.sb-faq-list details>div{padding-bottom:32px;font-size:15px;line-height:1.625;color:var(--sb-ink-2)}
.sb-faq-list .sb-text-link{margin-top:12px;color:var(--sb-primary)}
.sb-faq-list .sb-text-link .sb-icon{width:14px;height:14px;transition:transform var(--sb-d-fast) var(--sb-ease)}
.sb-faq-list .sb-text-link:hover{color:var(--sb-primary-deep)}
.sb-faq-list .sb-text-link:hover .sb-icon{transform:translateX(4px)}
@media(max-width:767px){.sb-faq-list{padding-inline:20px}}

/* access-security */
/* access-security — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-feature-rows-light li{gap:16px;padding:16px 20px;background:var(--sb-bg);font-size:16px}
@media(min-width:1024px){
.sb-feature-rows-light{align-self:center}
}
/* ---- AccessSecurity.tsx: the hours well -------------------------------------------------- */
.sb-hours-well{display:inline-flex;align-items:flex-start;gap:12px;margin-top:24px;padding:16px 20px;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:var(--sb-bg)}
.sb-hours-well small{display:block;font-size:13px;color:var(--sb-muted)}
.sb-hours-well strong{display:block;margin-top:2px;font-size:15px;font-weight:500}
.sb-p-access-security{border-top:1px solid var(--sb-line);background:#fff}
/* AccessSecurity.tsx: the lead is `mt-4 max-w-[52ch] text-[16px] leading-relaxed`, and each
   feature row's label is text-[16px] on the inherited 1.5 leading. */
.sb-p-access-security .sb-prose{margin-top:16px;max-width:52ch;font-size:16px;line-height:1.625}
.sb-p-access-security .sb-feature-rows li,.sb-p-access-security .sb-feature-rows span{line-height:1.5}

/* availability-by-sede */
/* availability-by-sede — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-badge-quiet{border:1px solid var(--sb-line);background:var(--sb-bg);color:var(--sb-muted);font-size:11px;padding:1px 8px;white-space:nowrap}
.sb-row-zone{font-size:14px;line-height:1.5;color:var(--sb-muted)}
/* Section lead, on the same ramp as every other inner-page intro (mt-3, text-[15px]/1.5). */
.sb-p-availability-by-sede .sb-intro{max-width:65ch;margin-top:12px!important;font-size:15px;line-height:1.5}
/* "Ver todas las sedes": mt-4 here, text-[15px], gap-1.5. */
.sb-p-availability-by-sede .sb-text-link{margin-top:16px;font-size:15px;gap:6px}

/* axis-sedes */
/* axis-sedes — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-sede-rows{margin-top:40px}
.sb-sede-row{display:flex;align-items:center;gap:16px;padding:12px 20px 12px 12px;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:#fff;box-shadow:var(--sb-sh-1);transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease),border-color var(--sb-d) var(--sb-ease)}
.sb-sede-row:hover{transform:translateY(calc(-1 * var(--sb-hover-lift)));border-color:var(--sb-muted-2);box-shadow:var(--sb-sh-2)}
.sb-sede-row .sb-sede-thumb{width:80px;height:80px;flex-shrink:0;border:1px solid var(--sb-line);border-radius:var(--sb-r-md);object-fit:cover}
.sb-sede-row>span{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.sb-sede-row-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.sb-sede-row-head h3{margin:0;font:600 18px/28px "Bricolage Grotesque",sans-serif}
.sb-sede-row-head small{font-size:13px;font-weight:500;color:var(--sb-muted)}
.sb-sede-row:hover .sb-sede-row-head h3{color:var(--sb-primary-deep)}
.sb-sede-addresses{display:flex;flex-direction:column;font-size:13px;line-height:1.4;color:var(--sb-muted)}
@media(min-width:768px){
.sb-sede-row .sb-sede-thumb{width:96px;height:96px}
}
@media(max-width:767px){
.sb-sede-row{padding:10px 14px 10px 10px;gap:12px}
}
/* AxisChooser.tsx "Ver todas las sedes": mt-6, text-[15px], gap-1.5 — the shared .sb-text-link is
   a size down with a wider gap and carries no lead-in. */
.sb-p-axis-sedes>.sb-wrap>.sb-text-link{margin-top:24px;font-size:15px;gap:6px}

/* axis-services */
/* axis-services — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- AxisChooser.tsx (mudanzas services) ------------------------------------------------- */
.sb-service-axis{display:grid;gap:16px;margin-top:40px}
.sb-service-axis>a{color:inherit}
.sb-service-lead{display:flex;flex-direction:column;padding:0!important;overflow:hidden}
.sb-service-lead-photo{width:100%;aspect-ratio:16/9;object-fit:cover}
.sb-service-lead-copy{display:flex;height:100%;flex:1;flex-direction:column}
.sb-service-lead h3{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:24px;line-height:28px}
.sb-service-side-card{display:flex;flex-direction:column;align-items:flex-start}
.sb-service-side-card h3{margin-top:24px!important;font-family:"Bricolage Grotesque",sans-serif;font-size:20px;line-height:28px}
.sb-service-axis p{margin-top:8px;font-size:15px;line-height:1.625;color:var(--sb-ink-2)}
@media(min-width:768px){
.sb-service-axis{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sb-service-lead{grid-column:1/-1}
}
@media(min-width:1024px){
.sb-service-axis{grid-template-columns:1.6fr 1fr 1fr}
.sb-service-lead{grid-column:auto}
.sb-service-lead-photo{aspect-ratio:2/1}
}
.sb-p-axis-services h2{max-width:24ch}
.sb-p-axis-services .sb-service-axis{transform:translateY(12px)}

/* blog */
/* blog — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-blog-head{flex-wrap:wrap;gap:12px 32px}
.sb-blog-head>div{flex:0 1 auto}
.sb-blog-head h2{max-width:28ch}
@media(max-width:767px){
.sb-blog{order:14}
}

/* blog-index */
/* blog-index — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-article-dialog{width:min(800px,calc(100vw - 32px))}
.sb-article-dialog h3{margin-top:30px}
.sb-article-dialog ul{padding-left:24px}
.sb-article-dialog li{margin-bottom:8px}
.sb-blog-filter{display:flex;flex-wrap:wrap;gap:8px}
/* BlogIndex.tsx: an unselected filter darkens its border and its label on hover. */
.sb-chip-filter:not([aria-pressed=true]):hover{border-color:var(--sb-ink);color:var(--sb-ink)}
.sb-chip-filter[aria-pressed=true]{border-color:var(--sb-primary);background:var(--sb-primary);color:#fff}
/* Paginated, a chip is a link to its category archive instead of an in-place filter: same control,
   same chosen fill, with aria-current marking the list you are on. */
.sb-chip-link{text-decoration:none;color:var(--sb-ink)}
.sb-chip-link:not([aria-current]):hover{border-color:var(--sb-ink);color:var(--sb-ink)}
.sb-chip-link[aria-current]{border-color:var(--sb-primary);background:var(--sb-primary);color:#fff;box-shadow:var(--sb-sh-1)}
.sb-blog-count{margin-top:16px!important;font-size:13px;color:var(--sb-muted)}
.sb-blog-cards{margin-top:24px!important;gap:16px}
.sb-p-blog-index .sb-blog-filter{margin:0}
.sb-p-blog-index .sb-chip-filter[aria-pressed=true]{border-color:var(--sb-primary);background:var(--sb-primary);color:#fff;box-shadow:var(--sb-sh-1)}
.sb-p-blog-index .sb-blog-featured{display:grid;margin-top:32px;overflow:hidden}
.sb-p-blog-index .sb-blog-featured h3{font-size:30px;line-height:36px}
.sb-p-blog-index .sb-blog-cards{margin-top:20px!important}
@media(min-width:1024px){
.sb-p-blog-index .sb-blog-featured{grid-template-columns:1.2fr 1fr}
}
@media(min-width:768px){
.sb-blog-cards{gap:20px}
}

/* blog-teasers */
/* blog-teasers — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- BlogTeasers.tsx: deliberately secondary rows ---------------------------------------- */
.sb-teaser-rows{display:flex;flex-direction:column;gap:12px;margin-top:32px;padding:0;list-style:none;max-width:880px}
.sb-teaser-rows a{display:flex;align-items:center;gap:16px;min-height:56px;padding:16px 20px;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:#fff;box-shadow:var(--sb-sh-1);transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease),border-color var(--sb-d) var(--sb-ease)}
.sb-teaser-rows a:hover{transform:translateY(calc(-1 * var(--sb-hover-lift)));border-color:var(--sb-muted-2);box-shadow:var(--sb-sh-2)}
.sb-teaser-rows span{flex:1;font-size:16px;font-weight:600}
.sb-teaser-rows a:hover span{color:var(--sb-primary)}
/* BlogTeasers.tsx: the rows open mt-8 under the heading. */
.sb-p-blog-teasers .sb-teaser-rows{margin-top:32px}

/* breadcrumb */
/* breadcrumb — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- Breadcrumb.tsx ----------------------------------------------------------------------- */
/* The -32px that used to be here cancelled `.sb-main`'s 2rem top padding. That padding is gone
   (style.css), so the crumb sits at the top of <main> on its own, as Breadcrumb.tsx does. */
.sb-p-breadcrumb{padding-top:0}
.sb-crumbs{padding-top:16px!important}
.sb-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;padding:0;list-style:none;font-size:13px;color:var(--sb-muted)}
.sb-crumbs li{display:flex;align-items:center;gap:6px}
.sb-crumbs a{display:inline-flex;align-items:center;min-height:44px;border-radius:2px;color:inherit;transition:color var(--sb-d-fast) var(--sb-ease)}
.sb-crumbs a:hover{color:var(--sb-ink)}
.sb-crumbs [aria-current=page]{font-weight:500;color:var(--sb-ink)}
/* Breadcrumb.tsx runs on leading-normal, not the theme's 1.6 body leading. */
.sb-crumbs,.sb-crumbs a,.sb-crumbs span,.sb-crumbs li{line-height:1.5}

/* bridge */
/* bridge — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- BridgeToBodegaje.tsx ---------------------------------------------------------------- */
.sb-bridge{display:grid;overflow:hidden;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);box-shadow:var(--sb-sh-1)}
.sb-bridge-photo{width:100%;aspect-ratio:16/9;object-fit:cover}
.sb-bridge>div{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:28px}
.sb-bridge h2{max-width:22ch}
.sb-bridge p{margin-top:12px;max-width:52ch;font-size:16px;line-height:1.625;color:var(--sb-ink-2)}
@media(min-width:1024px){
.sb-bridge{grid-template-columns:1fr 1.2fr}
.sb-bridge-photo{align-self:stretch;aspect-ratio:auto;height:100%!important;min-height:0}
.sb-bridge>div{padding:48px}
}
.sb-p-bridge .sb-bridge{transform:translateY(12px)}
@media(max-width:767px){
.sb-bridge>div{padding:22px}
}

/* calculator */
/* calculator — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-intent-card{display:flex;flex-direction:column;align-items:flex-start;min-height:44px;padding:20px;border:2px solid var(--sb-line);background:white;border-radius:16px;text-align:left;color:var(--sb-ink);transition:border-color var(--sb-d-fast) var(--sb-ease),background-color var(--sb-d-fast) var(--sb-ease),box-shadow var(--sb-d-fast) var(--sb-ease),transform var(--sb-d-fast) var(--sb-ease)}
.sb-intent-card[aria-pressed=true]{border-color:var(--sb-primary);background:var(--sb-primary-select);box-shadow:var(--sb-sh-2)}
.sb-intent-card:not([aria-pressed=true]):hover{transform:translateY(calc(-1 * var(--sb-hover-lift)));box-shadow:var(--sb-sh-2)}
.sb-intent-card:active{transform:scale(.98)}
.sb-intent-top{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:8px}
.sb-intent-iso{width:80px;height:60px;flex-shrink:0;transition:transform var(--sb-d) var(--sb-ease)}
.sb-intent-card:not([aria-pressed=true]):hover .sb-intent-iso{transform:translateY(-4px)}
.sb-intent-iso polygon{stroke:var(--sb-muted-2);stroke-linejoin:round;transition:fill var(--sb-d) var(--sb-ease),stroke var(--sb-d) var(--sb-ease),fill-opacity var(--sb-d) var(--sb-ease)}
.sb-intent-card[aria-pressed=true] .sb-intent-iso polygon{stroke:var(--sb-primary)}
.sb-intent-range{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);font-weight:600;line-height:1;white-space:nowrap;color:var(--sb-ink)}
.sb-intent-card[aria-pressed=true] .sb-intent-range{color:var(--sb-primary-deep)}
.sb-intent-card>strong{margin-top:16px}
.sb-intent-card>span:last-child{margin-top:4px;font-size:14px;color:var(--sb-muted-2)}
@media(min-width:768px){
.sb-intent-card{padding:24px}
.sb-intent-top{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px}
}
@media(max-width:767px){
.sb-calculator{order:2}
.sb-intent-card{padding:16px}
.sb-intent-top{flex-direction:column;align-items:flex-start}
.sb-intent-top strong{font-size:23px}
.sb-intent-top img{width:72px;height:64px}
}

/* calculator-full */
/* Calculator.tsx — moved out of assets/css/pages.css, rule for rule. Loads only where the block is. */
/* ---- Calculator.tsx: inventory by room, steppers, sticky total bar --------------------- */
.sb-calc-page{margin-top:32px}
/* CSS columns, not a grid: seven rooms of uneven length pack without an empty cell. */
.sb-calc-rooms{column-gap:20px}
.sb-calc-room{break-inside:avoid;margin-bottom:20px;padding:20px;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:#fff;box-shadow:var(--sb-sh-1)}
.sb-calc-room h2{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);line-height:1.15;max-width:none}
.sb-calc-room ul{display:grid;gap:4px;margin-top:12px;padding:0;list-style:none}
.sb-calc-room li{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-inline:-8px;padding:6px 8px;border-radius:var(--sb-r-md);transition:background-color var(--sb-d-fast) var(--sb-ease)}
/* A row with a count is an answer, so it takes the same fill as a chosen chip. */
.sb-calc-room li.is-counted{background:var(--sb-primary-select)}
.sb-calc-item{min-width:0}
.sb-calc-item-name{display:block;font-size:15px;color:var(--sb-ink)}
.sb-calc-room li.is-counted .sb-calc-item-name{font-weight:600}
.sb-calc-item-m3{display:block;font-size:13px;color:var(--sb-ink-2)}
.sb-calc-stepper{display:flex;align-items:center;gap:4px;flex-shrink:0}
.sb-calc-step{display:flex;align-items:center;justify-content:center;width:44px;height:44px;scroll-margin-bottom:160px;border:1px solid var(--sb-line);border-radius:var(--sb-r-md);background:var(--sb-surface);color:var(--sb-ink);font-size:18px;line-height:1;cursor:pointer;transition:border-color var(--sb-d-fast) var(--sb-ease)}
.sb-calc-step:hover{border-color:var(--sb-ink)}
.sb-calc-step[aria-disabled=true]{cursor:not-allowed;opacity:.4}
.sb-calc-step[aria-disabled=true]:hover{border-color:var(--sb-line)}
.sb-calc-count{width:32px;padding-block:2px;border-radius:var(--sb-r-sm);text-align:center;font-size:16px;font-weight:600;color:var(--sb-ink);transition:background-color var(--sb-d-fast) var(--sb-ease),color var(--sb-d-fast) var(--sb-ease)}
.sb-calc-room li.is-counted .sb-calc-count{background:var(--sb-primary);color:#fff}
/* The total bar sticks to the bottom of the tool, clear of the mobile sticky bar and the
   WhatsApp bubble's column (pr-20 / md:pr-24 in the reference). */
.sb-calc-bar{position:sticky;bottom:calc(env(safe-area-inset-bottom) + 72px);z-index:20}
.sb-calc-total{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:16px 80px 16px 16px;border-radius:var(--sb-r-lg);box-shadow:var(--sb-sh-3)}
.sb-calc-summary{font-size:15px;color:var(--sb-muted)!important}
.sb-calc-summary strong{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);font-weight:600;color:var(--sb-ink)}
.sb-calc-summary b{font-weight:600;color:var(--sb-accent)}
.sb-calc-total .sb-small{margin-top:4px;display:none;font-size:13px;color:var(--sb-muted)}
.sb-calc-cta{flex-shrink:0}
@media(min-width:768px){
    .sb-calc-rooms{column-count:2}
    .sb-calc-room{padding:24px}
    .sb-calc-bar{bottom:16px}
    .sb-calc-total{padding:24px 96px 24px 24px}
    .sb-calc-total .sb-small{display:block}
}

/* Inside a column the tool keeps its own top rule and drops the column width cap. */
.wp-block-column .sb-calc-page{margin-top:32px;max-width:none}

/* clients */
/* clients — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* Mirrors ClientLogos.tsx: CSS-only marquee, four copies, pauses on hover/focus,
   static single row under reduced motion. Each logo centred in an equal 128x48 slot. */
.sb-clients{background:var(--sb-surface);border-block:1px solid var(--sb-line)}
.sb-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sb-marquee-track{display:flex;width:max-content;animation:sb-marquee 40s linear infinite}
.sb-marquee:hover .sb-marquee-track,.sb-marquee:focus-within .sb-marquee-track{animation-play-state:paused}
.sb-marquee-row{display:flex;flex-shrink:0;align-items:center;gap:56px;padding:0 56px 0 0;margin:0;list-style:none}
.sb-marquee-row li{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:128px;height:48px}
.sb-marquee-row img{width:auto;max-width:100%;max-height:48px;object-fit:contain;opacity:.8;filter:grayscale(1);transition:filter var(--sb-d) var(--sb-ease),opacity var(--sb-d) var(--sb-ease)}
.sb-marquee-row img:hover{opacity:1;filter:none}
@media(prefers-reduced-motion:reduce){
.sb-marquee-track{animation:none}
.sb-marquee-row[aria-hidden]{display:none}
}
@media(max-width:767px){
.sb-clients{order:11}
.sb-marquee-row{gap:36px;padding-right:36px}
.sb-marquee-row li{width:104px;height:40px}
.sb-marquee-row img{max-height:40px}
}

/* closing */
/* closing — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-closing{position:relative;isolation:isolate;border-top:1px solid rgba(255,255,255,.12);background:#14161b}
.sb-closing-image{position:absolute;inset:0;z-index:-1;overflow:hidden}
.sb-closing-image img{position:relative;z-index:0;width:100%;height:100%;object-fit:cover}
/* ClosingBand Photo uses the same two layers as Next.js: an AA-safe dark wash, then a deep bottom scrim. */
.sb-closing-image:after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(to top,rgba(20,22,27,.9),rgba(20,22,27,.45),rgba(20,22,27,.2)),rgba(20,22,27,.55)}
.sb-closing-panel{max-width:74ch;margin:auto;padding:48px 24px;text-align:center;background:rgba(27,30,38,.4);backdrop-filter:blur(24px);border:1px solid var(--sb-line);border-radius:var(--sb-r-xl);box-shadow:var(--sb-sh-3)}
.sb-closing-panel h2{width:100%;font-size:clamp(44px,calc(28px + 3.5vw),68px);line-height:.95;max-width:524.875px;margin:auto}
.sb-closing-panel .sb-intro{font-size:15px;line-height:1.5}
@media(min-width:768px){
.sb-closing-panel{max-width:746.9375px;padding:68px 56px 44px}
}
@media(max-width:767px){
.sb-closing{order:13}
}

/* company-story */
/* company-story — CompanyStory.tsx. The intro block above owns the page's top padding, so this
   section only pads the bottom (reference pb-14 md:pb-20). */
.sb-p-company-story>.sb-wrap{padding-block:0 56px}
/* CompanyStory.tsx heading: text-3xl, which is the section h2 size already — only the 20ch cap goes. */
.sb-p-company-story h2{max-width:none}
.sb-story-prose{display:flex;flex-direction:column;gap:16px;margin-top:20px;max-width:65ch;font-size:16px;line-height:1.625;color:var(--sb-ink-2)}
/* The timeline: a left rule on phones, a top rule from md. The class alone loses to the
   `.sb-section ol{margin:0}` reset in home.css, so the lead-in (mt-12) is scoped to the block. */
.sb-p-company-story .sb-story-timeline{margin:48px 0 0}
.sb-story-timeline{display:grid;gap:32px;padding:0 0 0 24px;list-style:none;border-left:2px solid var(--sb-line)}
.sb-story-timeline>li{position:relative}
.sb-story-node{position:absolute;top:8px;left:-31px;width:12px;height:12px;border:1px solid var(--sb-brand-deep);border-radius:8px;background:var(--sb-yellow)}
.sb-story-mark{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:var(--sb-ink)}
/* Scoped past `.sb-section p{margin:0}`, same as the timeline's own lead-in. */
.sb-p-company-story .sb-story-label{margin-top:8px}
.sb-story-label{max-width:28ch;font-size:15px;line-height:1.375;color:var(--sb-ink-2)}
@media(min-width:768px){
.sb-p-company-story>.sb-wrap{padding-block:0 80px}
.sb-story-timeline{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0;border-left:0;border-top:2px solid var(--sb-line)}
.sb-story-timeline>li{padding:28px 32px 0 0}
.sb-story-node{top:-7px;left:0}
}

/* contact */
/* contact — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ContactBand.tsx: tinted band, heading stacked above three full-width channel tiles. */
.sb-contact{background:var(--sb-soft);border-block:1px solid var(--sb-line)}
.sb-contact h2{max-width:none;font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);line-height:1.15}
.sb-contact-cards{margin-top:32px;gap:12px}
.sb-contact-card{display:flex;align-items:center;gap:16px;min-height:72px;border:1px solid var(--sb-line);background:var(--sb-surface);border-radius:var(--sb-r-lg);padding:16px 20px;min-width:0;box-shadow:var(--sb-sh-1);cursor:pointer;transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease),border-color var(--sb-d) var(--sb-ease)}
.sb-contact-card:hover{transform:translateY(calc(-1 * var(--sb-hover-lift)));border-color:var(--sb-muted-2);box-shadow:var(--sb-sh-2)}
.sb-contact-card:active{transform:scale(.98)}
.sb-contact-card strong{transition:color var(--sb-d-fast) var(--sb-ease)}
.sb-contact-card:hover strong{color:var(--sb-primary-deep)}
.sb-contact-icon{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;border-radius:12px;background:var(--sb-yellow)}
.sb-contact-card small,.sb-contact-card strong{display:block;overflow-wrap:anywhere}
.sb-contact-card small{font-size:13px;color:var(--sb-muted)}
.sb-contact-card strong{font-size:17px}
/* Tablet: three tiles still share the row, so they tighten instead of wrapping. */
@media(max-width:1023px){
.sb-contact-card{padding:16px 12px;gap:10px}
.sb-contact-card strong{font-size:14px}
}
@media(max-width:767px){
.sb-contact{order:7}
.sb-contact-card{padding:18px 20px}
.sb-contact-card strong{font-size:17px}
}

/* contact-rail */
/* contact-rail — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-rail-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border-radius:var(--sb-r-md);background:var(--sb-yellow);color:#14161b}

/* coverage-prose */
/* coverage-prose — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-tinted-band{background:var(--sb-soft);border-top:1px solid var(--sb-line)}
.sb-p-coverage-prose h2{max-width:24ch}
.sb-coverage-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:24px;border-radius:2px;font-size:15px;font-weight:500;color:var(--sb-primary)}
.sb-p-coverage-prose .sb-coverage-link{transform:translateY(-12px)}
.sb-coverage-link:hover{color:var(--sb-primary-deep)}

/* exit-offer */
/* Popups.tsx exit offer: SealPercent at 32px in primary-deep, then the title tight under it, the
   body at 8px, the CTA at 24px and the terms at 12px. */
#sb-exit-offer .sb-exit-seal{display:block;color:var(--sb-primary-deep)}
#sb-exit-offer .sb-exit-seal .sb-icon{width:32px;height:32px}
#sb-exit-offer h2{margin:16px 0 0}
#sb-exit-offer>p:not(.sb-small){margin:8px 0 0;color:var(--sb-ink-2)}
#sb-exit-offer .sb-button.sb-popup-cta{margin-top:24px}
#sb-exit-offer .sb-small{margin:12px 0 0}
/* Icon picker preview in the block sidebar (editor only). */
.sb-icon-field-preview{margin:4px 0 0;color:var(--sb-ink-2)}
.sb-icon-field-preview .sb-icon{width:28px;height:28px}

/* faq */
/* faq — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-faq-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px}
.sb-faq-grid h2{max-width:16ch}
.sb-faq-sizes{margin:12px 0 0;font-size:18px;font-weight:600}
.sb-faq-sizes p{color:var(--sb-yellow);margin:0}
@media(max-width:767px){
.sb-faq{order:12}
}
/* The reference stacks the price card above the questions until 1024px, not 768px: between those
   two widths a two-column split leaves both halves too narrow to read. Same ratio and gap above it
   (measured 443:542 at 1100px, which is .9fr 1.1fr). */
@media(max-width:1023px){
.sb-faq-grid{grid-template-columns:1fr}
}

/* faq-accordion */
/* The block's own box. The accordion itself is shared/faq-list.css. */
.sb-p-faq-accordion .sb-faq-list{max-width:880px;margin-top:32px}

/* faq-hub */
/* faq-hub — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-faq-groups{display:flex;flex-direction:column;gap:48px}
.sb-faq-group{scroll-margin-top:112px}
.sb-p-faq-hub .sb-h2-small{font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem)!important;line-height:1.15}
@media(min-width:768px){
.sb-faq-groups{gap:64px}
}

/* faq-index */
/* faq-index — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- FaqHub.tsx: dark theme index + one accordion per theme ------------------------------ */
.sb-faq-index{padding:24px;box-shadow:var(--sb-sh-3)}
.sb-faq-index h2{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.3rem,1.2rem + .6vw,1.5rem);line-height:1.15}
.sb-faq-index ul{margin-top:16px;padding:0;list-style:none}
.sb-faq-index li+li{border-top:1px solid var(--sb-line)}
.sb-faq-index a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px}
.sb-faq-index a>span:first-child{font-size:18px;font-weight:600}
.sb-faq-index a:hover>span:first-child{color:var(--sb-primary)}
.sb-faq-index a>span:last-child{display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:13px;color:var(--sb-muted)}
@media(min-width:768px){
.sb-faq-index{padding:32px}
}
@media(max-width:767px){
.sb-faq-index{padding:22px}
}

/* footer */
/* footer — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-footer{background:white;border-top:1px solid var(--sb-line);padding-top:64px;padding-bottom:24px}
.sb-footer h2{font:600 15px/1.4 Inter,sans-serif;margin-bottom:20px}
.sb-footer ul{padding:0;list-style:none}
.sb-footer li{margin-bottom:12px;font-size:13px}
.sb-footer li small{display:block;font-size:11px;color:var(--sb-muted);margin-top:2px}
/* Footer.tsx + NapBand.tsx parity: the footer the site actually shows. */
.sb-footer{padding:0}
.sb-footer-reference{padding:80px 0;background:var(--sb-surface)}
.sb-footer-reference-wrap{width:min(100%,1280px);margin-inline:auto;padding-inline:40px}
/* Footer.tsx: `grid gap-10 md:grid-cols-2 lg:grid-cols-4` — one column on phones, two from
   md, four from lg. The theme held four columns all the way down to 768px. */
.sb-footer-reference-columns{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:768px){.sb-footer-reference-columns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.sb-footer-reference-columns{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sb-footer-reference h2{width:100%;margin:0 0 16px;padding-bottom:8px;border-bottom:1px solid var(--sb-line);font:600 14px/21px Inter,sans-serif;color:var(--sb-ink)}
.sb-footer-reference ul{margin:0;padding:0;list-style:none}
/* Link columns (Footer.tsx: ul.space-y-2.5). The row is a 13px link on a line box the inherited
   16px/1.5 body type sets, so the leading is 24px even though the text is 13. */
.sb-footer-reference li{margin:0;font-size:13px;line-height:24px}
.sb-footer-reference li+li{margin-top:10px}
/* The link is text-[13px] with the inherited 1.5 leading; the 24px line box above is the li's
   own strut, which the reference gets from the 16px body type. */
.sb-footer-reference li a,.sb-footer-reference li button{font-size:13px;line-height:19.5px;color:var(--sb-muted)}
.sb-footer-reference li a:hover,.sb-footer-reference li button:hover{color:var(--sb-ink)}
/* Sedes column (ul.space-y-3): the li carries text-[13px], so its own line box is 13/1.5, and the
   address under each name is leading-relaxed. */
.sb-footer-reference-columns>div:nth-child(2) li{line-height:19.5px}
.sb-footer-reference-columns>div:nth-child(2) li+li{margin-top:12px}
.sb-footer-reference-columns>div:nth-child(2) li>a{font-weight:500;line-height:19.5px;color:var(--sb-ink)}
.sb-footer-reference-columns>div:nth-child(2) li>a:hover{color:var(--sb-primary-deep)}
.sb-footer-reference li small{display:block;margin:0;font-size:13px;line-height:1.625;color:var(--sb-muted)}
/* "Ver las 7 sedes →" sits on pt-1 and, unlike the address rows above it, carries no text-[13px]
   of its own, so its line box comes from the inherited body type. */
.sb-footer-reference-columns>div:nth-child(2) li.sb-footer-reference-all{line-height:24px}
.sb-footer-reference-all{padding-top:4px}
.sb-footer-reference-all a{font-weight:500!important;color:var(--sb-primary)!important}
/* border-primary/20 in the reference: --primary (#262324) at 20%, not --primary-deep (#6b5434). */
.sb-footer-reference-nap{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:24px;min-height:296px;margin-top:32px;padding:32px;border:1px solid rgba(38,35,36,.2);border-radius:16px;background:var(--sb-soft)}
.sb-footer-reference-brand>a{display:inline-flex;margin-bottom:16px}
.sb-footer-reference-brand img{display:block;width:128px;height:64px;object-fit:contain}
.sb-footer-reference-brand h3{margin:0;font:600 18px/28px Inter,sans-serif;color:var(--sb-ink)}
.sb-footer-reference-brand>p{margin:4px 0 0;font-size:13px;line-height:19.5px;color:var(--sb-muted)}
.sb-footer-reference-brand .sb-footer-reference-address{display:flex;align-items:flex-start;gap:8px;margin-top:12px}
.sb-footer-reference-detail{font-size:13px;line-height:19.5px}
.sb-footer-reference-detail>p{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:12px;font-weight:500;line-height:18px;color:var(--sb-muted)}
.sb-footer-reference-detail>a,.sb-footer-reference-detail>strong{display:block;font-size:14px;font-weight:500;line-height:21px;color:var(--sb-ink)}
.sb-footer-reference-detail>a:last-child{font-size:13px;line-height:19.5px;color:var(--sb-primary)}
.sb-footer-reference-copyright{margin:32px 0 0!important;font-size:13px;line-height:19.5px;color:var(--sb-muted)}
.sb-footer-reference-privacy{max-width:65ch;margin:8px 0 0!important;font-size:13px;line-height:21px;color:var(--sb-muted)}
.sb-footer-reference-privacy a{font:500 13px/21px Inter,sans-serif;color:var(--sb-primary)}
.sb-footer-reference-privacy a:hover{color:var(--sb-primary-deep)}
.sb-whatsapp{position:fixed;right:24px;bottom:24px;display:flex;align-items:center;gap:12px;z-index:60}
.sb-whatsapp>a{width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;color:white!important;box-shadow:0 8px 24px #14161b15}
.sb-whatsapp>a{transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease),background-color var(--sb-d) var(--sb-ease)}
.sb-whatsapp>a:hover{transform:translateY(calc(-1 * var(--sb-hover-lift)));background:var(--sb-whatsapp-deep);box-shadow:var(--sb-sh-2)}
.sb-whatsapp>a:active{transform:translateY(calc(-1 * var(--sb-hover-lift))) scale(.98)}
/* WhatsAppWidget.tsx: `items-center gap-1 pl-4 pr-1`, the text on `py-3 text-[14px] font-medium`.
   The right padding is 4px, not 16px, because the dismiss control carries its own 44px box. */
/* `max-w-[min(70vw,22rem)]`: the greeting is one line of copy next to a 56px bubble, and on a
   360px phone an unbounded row pushed the pair off the right edge. */
.sb-chat-greeting{display:flex;align-items:center;gap:4px;max-width:min(70vw,22rem);font-size:14px;font-weight:500;padding:0 4px 0 16px;border:1px solid var(--sb-line);border-radius:16px;background:#fff;box-shadow:0 8px 24px #14161b12}
/* 44x44, the tap-target floor: this was a bare 20px × glyph measuring 13x20. */
.sb-chat-greeting button{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;padding:0;background:none;border:0;line-height:1;border-radius:var(--sb-r-md);color:var(--sb-muted);transition:color var(--sb-d-fast) var(--sb-ease)}
.sb-chat-greeting button .sb-icon{width:16px;height:16px}
.sb-chat-greeting button:hover{color:var(--sb-ink)}
.sb-back-top{position:fixed;right:30px;bottom:94px;z-index:59;width:44px;height:44px;display:grid;place-items:center;background:white;border:1px solid var(--sb-line);border-radius:50%;font-size:24px;transition:transform var(--sb-d) var(--sb-ease),background-color var(--sb-d) var(--sb-ease),border-color var(--sb-d) var(--sb-ease),color var(--sb-d) var(--sb-ease)}
.sb-back-top:hover{transform:translateY(calc(-1 * var(--sb-hover-lift)));border-color:var(--sb-brand-deep);background:var(--sb-yellow);color:var(--sb-on-brand)}
.sb-mobile-cta{display:none}
.sb-calculator-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sb-calc-result{background:var(--sb-soft);border-radius:12px;padding:20px;margin-top:24px}
.sb-calc-result strong{display:block;font:600 26px/1.3 "Bricolage Grotesque",sans-serif}
@media(max-width:767px){
/* `pb-24 md:pb-0`: room under the footer for the fixed mobile CTA bar, and nothing else. */
.sb-footer{padding-top:0;padding-bottom:96px}
/* WhatsAppWidget.tsx: `bottom-[calc(env(safe-area-inset-bottom)+5rem)] right-4 md:bottom-6
   md:right-6`. The 5rem clears the CTA bar; the inset is what keeps it clear on a notched phone,
   and without it the bubble crept into the bar. The button stays `h-14 w-14` and the greeting
   stays visible — the reference hides neither on a phone, and shrinking the bubble to 52px put
   the one tap target that is always on screen under the 56px it is drawn at. */
.sb-whatsapp{right:16px;bottom:calc(80px + env(safe-area-inset-bottom))}
.sb-back-top{right:20px;bottom:148px}
/* MobileStickyBar.tsx: the grid is `gap-2 p-2` inside a nav that carries the safe-area inset on
   its own padding — 8px, not the 10/16 this had, which cost the two cells 9px of width each and
   made the bar 4px taller than the reference's 65. */
.sb-mobile-cta{position:fixed;bottom:0;inset-inline:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:white;border-top:1px solid var(--sb-line);z-index:55}
/* MobileCtaBar.tsx: both cells are real buttons — 48px tall, 12px corners, 14px type — and the
   call is the outlined one, bordered in ink on white. This bar had them at 44px with 8px corners
   and a pale --sb-line border on both, so "Llamar" read as a disabled chip beside a live button. */
.sb-mobile-cta a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border:1px solid var(--sb-ink);border-radius:var(--sb-r-md);background:white;font-size:14px;font-weight:500}
/* The bar's icons are 18px like every other button's; these were coming through at their raw 22. */
.sb-mobile-cta a .sb-icon{width:18px;height:18px}
.sb-mobile-cta a:first-child{background:var(--sb-yellow);border-color:#d9cf22}
}
@media(max-width:767px){
/* Footer.tsx: the inner wrap keeps py-14 on phones; the 96px that clears the fixed mobile CTA bar
   is the footer's own pb-24, below. */
.sb-footer-reference{padding:56px 0}
.sb-footer-reference-wrap{padding-inline:20px}
/* NapBand.tsx is `grid gap-6 md:grid-cols-[1.2fr_1fr_1fr_1fr]`: a single column on phones, not two. */
.sb-footer-reference-nap{grid-template-columns:1fr;min-height:0;gap:24px;margin-top:32px;padding:24px}
.sb-footer-reference-brand{grid-column:1/-1}
}

/* Perfiles sociales, entre las columnas y la banda NAP (Footer.tsx: mt-12, luego la NAP a mt-8). */
.sb-footer-social{display:flex;align-items:center;gap:16px;margin-top:48px}
.sb-footer-social p{font-size:14px;font-weight:600;color:var(--sb-ink)}
.sb-footer-social ul{display:flex;align-items:center;gap:10px;margin:0;padding:0;list-style:none}
/* The footer link columns stack their items with `.sb-footer-reference li+li{margin-top:12px}`,
   which out-specifies a single class and pushed the second icon down, making the row 56px against
   the reference 44. The icons sit side by side, so that spacing is cancelled here. */
.sb-footer-social li{display:flex;margin:0;padding:0}
.sb-footer-social li+li{margin-top:0}
.sb-footer-social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--sb-line);border-radius:var(--sb-r-md);background:var(--sb-bg);color:var(--sb-ink);transition:color var(--sb-d-fast) var(--sb-ease),background-color var(--sb-d-fast) var(--sb-ease),border-color var(--sb-d-fast) var(--sb-ease)}
.sb-footer-social a:hover{border-color:var(--sb-muted-2);background:var(--sb-yellow);color:var(--sb-on-brand)}
.sb-footer-social .sb-icon{width:20px;height:20px}

/* header */
/* header — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-utility{display:flex;justify-content:space-between;gap:20px;padding-block:6px;border-bottom:1px solid var(--sb-line);font-size:13px;line-height:1.5;color:var(--sb-muted)}
.sb-utility>span,.sb-utility a{display:flex;align-items:center;gap:8px}
.sb-utility-group>span{display:flex;align-items:center;gap:8px}
.sb-utility b{font-weight:400;padding-inline:4px}
/* Match Header.tsx: the dropdown is positioned from the padded navigation row,
   so its outline starts and ends with the header content, never at viewport edges. */
.sb-nav-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:12px;min-height:80px}
.sb-logo img{width:112px;height:56px;object-fit:contain}
.sb-desktop-nav{display:flex;align-items:center;gap:4px}
.sb-nav-actions{display:flex;align-items:center;gap:8px}
.sb-nav-link{padding:8px 12px;border-radius:var(--sb-r-sm);font-size:14px;font-weight:500;line-height:1.5;color:var(--sb-ink-2);transition:color var(--sb-d-fast) var(--sb-ease)}
.sb-nav-link:hover{color:var(--sb-ink)}
.sb-nav-actions{gap:8px}
.sb-menu-toggle{display:none}
.sb-mobile-menu{border-top:1px solid var(--sb-line);padding:20px;max-height:calc(100dvh - 80px);overflow:auto}
.sb-nav-item{position:static;display:flex;align-items:center}
.sb-nav-item>.sb-nav-link{padding-right:10px}
.sb-mega-toggle{position:absolute;right:0;width:20px;height:37px;padding:0;border:0;background:none;cursor:pointer}
.sb-mega{position:absolute;left:0;right:0;top:100%;z-index:60;border:1px solid var(--sb-line);border-top:0;border-radius:0 0 var(--sb-r-xl) var(--sb-r-xl);background:#fff;box-shadow:var(--sb-sh-3)}
.sb-mega[hidden]{display:none}
/* MegaMenu.tsx uses `p-6`; panel itself is already constrained by .sb-nav-row. */
.sb-mega-cols{display:grid;gap:24px;padding:24px;width:100%;margin-inline:auto}
.sb-mega-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sb-mega-col ul{padding:0;list-style:none}
.sb-mega-cols-1 .sb-mega-col ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.sb-mega-col a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;font-size:14px;color:var(--sb-ink-2);transition:background-color var(--sb-d-fast) var(--sb-ease),color var(--sb-d-fast) var(--sb-ease)}
.sb-mega-col a:hover{background:var(--sb-bg);color:var(--sb-ink)}
.sb-mega-col-priority{border:1px solid rgba(134,106,65,.4);border-radius:var(--sb-r-md);background:var(--sb-accent-soft);padding:12px 16px}
/* The reference's footer link is a compact inline row, not a 44px button target. */
.sb-mega-more{min-height:0;margin-top:12px;padding-inline:8px;font-size:13px;color:var(--sb-primary)}
.sb-mega-more:hover{color:var(--sb-primary-deep)}
/* Mobile: the same tree as an accordion. */
.sb-mobile-nav{display:flex;flex-direction:column}
.sb-mobile-group{border-bottom:1px solid var(--sb-line)}
.sb-mobile-group summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:12px 4px;font-size:20px;font-weight:600;cursor:pointer}
.sb-mobile-group summary::-webkit-details-marker{display:none}
.sb-mobile-group .sb-mega-cols{display:block;width:auto;padding:0 4px 16px;margin:0}
.sb-mobile-group .sb-mega-col+.sb-mega-col{margin-top:12px}
.sb-mobile-group .sb-mega-col a{min-height:44px;font-size:16px}
.sb-mobile-nav>.sb-nav-link{border-bottom:1px solid var(--sb-line);padding:12px 4px;font-size:20px;font-weight:600;transition:background-color var(--sb-d-fast) var(--sb-ease)}
.sb-mobile-nav>.sb-nav-link:hover,.sb-mobile-group summary:hover{background:var(--sb-bg)}
.sb-mobile-group .sb-mega-col a:hover{color:var(--sb-ink)}
.sb-mobile-actions{display:grid;gap:12px;margin-top:20px}
@media(min-width:640px){
.sb-mobile-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* The reference header switches from its desktop mega-menu at Tailwind's `lg` breakpoint (1024px).
   These live here rather than in home.css because build/blocks.css is enqueued after the base
   sheets, so a base-sheet media query cannot override a block's own unqualified declaration. */
@media(max-width:1023px){
.sb-desktop-nav{display:none}
/* MobileDrawer.tsx: `h-11 w-11 rounded-md border` — a real button, not three loose bars. */
.sb-menu-toggle{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--sb-line);border-radius:var(--sb-r-md);background:#fff}
.sb-menu-toggle span{display:block;width:21px;height:1.5px;background:#14161b;transition:transform var(--sb-d-fast) var(--sb-ease),opacity var(--sb-d-fast) var(--sb-ease)}
/* Open, the three bars are the close cross the reference draws in its place. The middle bar fades
   rather than collapsing, so the other two have a fixed 6.5px to travel and meet in the centre. */
.sb-menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.sb-menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.sb-menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* The drawer is a child of the header, not its sibling, so inside the header's stacking context
   it paints over the logo and the toggle — the two controls the drawer most needs reachable. The
   row is lifted above it rather than moving the panel out of the markup, which would take the
   mega-menu's positioning with it. */
.sb-header>.sb-wrap{position:relative;z-index:46}

/* ---- the drawer ----
   `fixed inset-0 z-[35] flex flex-col bg-surface pt-24`: the whole viewport, not a panel hanging
   off the header. A dropdown let the page show through underneath and scroll behind the menu, and
   on a short phone the rows and the two CTAs could not both fit. Full height means the links
   scroll on their own and the CTAs stay where a thumb is.
   z-index sits under the header (50) so the logo and the close button stay reachable, and over the
   fixed bottom bar (55 → hidden below) and the WhatsApp bubble. */
.sb-mobile-menu:not([hidden]){position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;gap:0;padding:0;padding-top:114px;border-top:0;max-height:none;background:var(--sb-surface);overscroll-behavior:contain}
/* Only this half scrolls, so the actions below never leave the screen. */
.sb-mobile-menu:not([hidden]) .sb-mobile-nav{flex:1;min-height:0;overflow-y:auto;padding:0 24px 32px;gap:0}
/* `.sb-section p{margin:0}` is a class plus an element and outranked a lone class, so the line sat
   flush against the last row's border. Matched on the panel as well to win it back. */
.sb-mobile-menu .sb-mobile-note{margin:24px 0 0;padding-inline:8px;font-size:13px;line-height:1.5;color:var(--sb-muted);font-variant-numeric:tabular-nums}
/* `border-t border-line bg-surface p-4`, plus the inset a notched phone needs. */
.sb-mobile-menu:not([hidden]) .sb-mobile-actions{flex:0 0 auto;margin:0;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--sb-line);background:var(--sb-surface)}

/* While it is open the drawer is the page: anything else fixed to the viewport is in front of the
   links or competing with the two actions at the bottom. */
body.sb-menu-open .sb-mobile-cta,
body.sb-menu-open .sb-whatsapp,
body.sb-menu-open .sb-back-top{display:none}
/* The header keeps the logo and the close button; its own CTA would sit beside a drawer that
   already ends in the same two buttons. */
body.sb-menu-open .sb-nav-actions>.sb-button{display:none}
/* The header's own border-bottom paints under the drawer, which is one of its children. Drawn on
   the lifted row instead so the logo still sits on a ruled line, as it does in the reference. */
body.sb-menu-open .sb-header>.sb-wrap{border-bottom:1px solid var(--sb-line)}
.sb-utility>span:last-child{display:none}
}
@media(max-width:767px){
.sb-utility{display:none}
/* The utility strip is hidden below 768, so the header is shorter and the drawer starts higher. */
.sb-mobile-menu:not([hidden]){padding-top:76px}
.sb-nav-row{padding-block:10px;min-height:76px;gap:12px}
.sb-logo img{width:100px;height:50px}
.sb-nav-calculator{display:none}
}

/* hero */
/* hero — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-hero{position:relative;isolation:isolate;overflow:hidden}
.sb-hero-image{position:absolute;inset:0;z-index:-1}
.sb-hero-image img{width:100%;height:100%;object-fit:cover}
.sb-hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,var(--sb-bg)),linear-gradient(90deg,#fff,#ffffff99 60%,transparent),linear-gradient(#ffffff26,#ffffff26)}
.sb-hero-content{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:78vh;min-height:78dvh;padding-block:96px}
.sb-hero-badge{border:1px solid var(--sb-line);background:#fffffff2;border-radius:30px;padding:8px 16px;font-size:12px;letter-spacing:.07em;margin:0 0 24px!important}
.sb-hero h1{font-size:clamp(44px,calc(28px + 3.5vw),68px);max-width:19ch}
@media(min-width:768px){
.sb-hero-content{min-height:78dvh}
}
/* Desktop rhythm calibration against the reference hero. */
@media(min-width:1024px){
.sb-hero-content{min-height:calc(78dvh - 2px)}
}
@media(max-width:767px){
.sb-hero-content{min-height:578px;padding-block:56px 80px}
.sb-hero h1{font-size:44px;max-width:16ch}
.sb-hero-badge{font-size:10px;border-radius:10px;line-height:1.6;padding:8px 12px}
.sb-hero-image:after{background:linear-gradient(0deg,var(--sb-bg),transparent 70%),linear-gradient(90deg,#fff,#ffffffcc 60%,#ffffff1a),linear-gradient(#ffffff66,#ffffff66)}
.sb-hero{order:0}
}

/* how-we-work */
/* how-we-work — HowWeWork.tsx: one panel, one row per capability (reference py-14 md:py-20). */
.sb-p-how-we-work>.sb-wrap{padding-block:56px}
/* HowWeWork.tsx heading: text-3xl, full measure. */
.sb-p-how-we-work>.sb-wrap>h2{max-width:none}
/* Scoped: `.sb-section ul{margin:0}` in home.css out-specifies the bare class and ate the mt-8. */
.sb-p-how-we-work .sb-how-rows{margin-top:32px}
.sb-how-rows{padding:0;list-style:none;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:var(--sb-surface);box-shadow:var(--sb-sh-1)}
.sb-how-rows>li{display:grid;gap:16px;padding:24px}
.sb-how-rows>li+li{border-top:1px solid var(--sb-line)}
.sb-how-rows h3{font-size:20px;line-height:28px}
.sb-how-rows p{margin-top:6px;max-width:60ch;font-size:15px;line-height:1.625;color:var(--sb-ink-2)}
.sb-how-rows .sb-text-link{justify-self:start;font-size:15px;color:var(--sb-primary)}
@media(min-width:768px){
.sb-p-how-we-work>.sb-wrap{padding-block:80px}
.sb-how-rows>li{grid-template-columns:auto 1fr auto;align-items:center;gap:32px;padding:24px 32px}
.sb-how-rows .sb-text-link{justify-self:end}
}

/* included-grid */
/* included-grid — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- IncludedGrid.tsx: bento, first cell tall and tinted --------------------------------- */
.sb-included-grid{display:grid;gap:16px;margin-top:40px!important;padding:0;list-style:none}
.sb-included-grid>li{display:flex;align-items:flex-start;gap:20px}
.sb-included-grid h3{margin-top:0;font-size:20px;line-height:28px}
.sb-included-grid p{margin-top:8px;max-width:48ch;font-size:15px;line-height:1.625;color:var(--sb-ink-2)}
.sb-included-lead{flex-direction:column;justify-content:space-between;gap:40px!important}
.sb-included-lead h3{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.3rem,1.2rem + .6vw,1.5rem);line-height:1.15}
.sb-included-lead p{font-size:17px}
@media(min-width:768px){
.sb-included-grid{grid-template-columns:1.1fr 1fr;grid-template-rows:auto auto;gap:20px}
.sb-included-grid>li{padding:32px}
.sb-included-lead{grid-row:span 2}
}
/* Mobile padding/gap: kept with the block, since build/blocks.css loads after pages.css. */
@media(max-width:767px){
.sb-included-lead{gap:24px!important}
}

/* included-vs-extra */
/* included-vs-extra — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- IncludedVsExtra.tsx: two unequal cells --------------------------------------------- */
.sb-included-split{display:grid;gap:16px;margin-top:40px}
.sb-included-split h3{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.3rem,1.2rem + .6vw,1.5rem)}
.sb-included-split>div{display:flex;flex-direction:column}
@media(min-width:768px){
.sb-included-split{grid-template-columns:1.5fr 1fr;gap:20px}
}
@media(min-width:1024px){
.sb-check-list-two{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px}
}

/* legal-sections */
/* legal-sections — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- politica-tratamiento-de-datos: plain legal prose ------------------------------------ */
.sb-legal{display:flex;flex-direction:column;gap:40px;max-width:820px}
.sb-bullets{display:flex;flex-direction:column;gap:10px;margin-top:16px;padding:0;list-style:none;font-size:16px;line-height:1.7;color:var(--sb-ink-2)}
.sb-bullets li{position:relative;padding-left:20px}
.sb-bullets li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--sb-primary)}
.sb-legal{max-width:65ch}

/* locations */
/* locations — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-button-white{background:#fff;border-color:var(--sb-line)}
.sb-button-white:hover{background:var(--sb-soft)}
.sb-map-status{min-height:1.5em;margin-top:8px!important;font-size:13px}
.sb-location-head{align-items:flex-end}
.sb-location-heading h2{max-width:20ch}
.sb-location-rule{display:block;width:min(320px,100%);height:1px;margin-top:20px;background:var(--sb-line)}
.sb-location-tools{display:flex;flex:0 0 auto!important;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-left:auto}
.sb-sort-locations{min-height:44px!important;padding:0 16px!important;border-color:var(--sb-line)!important;border-radius:var(--sb-r-md)!important;background:var(--sb-surface)!important;color:var(--sb-ink)!important;font-size:14px!important;font-weight:500!important;box-shadow:var(--sb-sh-1)!important}
.sb-sort-locations:hover{border-color:var(--sb-muted-2)!important;background:var(--sb-surface)!important;transform:none!important;box-shadow:var(--sb-sh-1)!important}
.sb-location-all{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--sb-primary);font-size:14px;font-weight:500}
.sb-location-all:hover{color:var(--sb-primary-deep)}
.sb-location-grid{--sb-location-height:560px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;margin-top:16px;align-items:stretch}
.sb-location-grid .sb-map-shell{height:auto;min-height:480px;background:var(--sb-bg-deep);box-shadow:var(--sb-sh-3)}
.sb-location-grid .sb-location-map{position:absolute;inset:0;height:100%;min-height:0}
.sb-location-map{width:100%;z-index:1}
/* Caption colours come from the reference's .dark-cell scope (SedeMap.tsx:48-51): title on --ink,
   the highlight on --brand, the sub-line on --muted. The title needs the extra class to outrank
   `.sb-section p`, which was colouring it --sb-muted. */
.sb-map-caption{position:absolute;top:16px;left:20px;max-width:60%;padding:0;z-index:2;color:#f5f6f8;pointer-events:none}
.sb-map-caption .sb-map-caption-title{margin:0;color:inherit;font-family:"Bricolage Grotesque",sans-serif;font-size:24px;line-height:1.15;font-weight:600;letter-spacing:-.02em}
.sb-map-caption-title span{color:var(--sb-yellow)}
.sb-map-caption-title + p{color:#9ba3b5;font-size:13px;margin-top:4px}
.sb-locations .leaflet-container{font-family:Inter,system-ui,sans-serif;background:var(--sb-bg-deep);z-index:0;isolation:isolate}
.sb-locations .leaflet-popup-content-wrapper,.sb-locations .leaflet-popup-tip{background:var(--sb-surface);color:var(--sb-ink)}
.sb-locations .leaflet-popup-content-wrapper{border-radius:var(--sb-r-md);box-shadow:var(--sb-sh-3)}
.sb-locations .leaflet-popup-content a{display:inline-flex;align-items:center;min-height:44px;color:var(--sb-primary);font-weight:500}
.sb-locations .leaflet-bar a{color:var(--sb-ink);background:var(--sb-surface);border-color:var(--sb-line)}
.sb-locations .leaflet-control-attribution{background:rgba(20,22,27,.75);color:var(--sb-muted)}
.sb-locations .leaflet-control-attribution a{color:var(--sb-ink-2)}
.sb-location-list{display:flex;flex-direction:column;gap:8px;max-height:var(--sb-location-height);min-width:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:auto;padding:0;scroll-padding-block:4px}
.sb-location-card{flex-shrink:0;overflow-wrap:anywhere}
.sb-location-focus{position:relative;z-index:1;display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:0;border:1px solid var(--sb-line);border-radius:var(--sb-r-sm);background:var(--sb-soft);color:var(--sb-primary);cursor:pointer}
.sb-location-focus:hover,.sb-location-focus:focus-visible{background:var(--sb-accent-soft);color:var(--sb-primary-deep)}
.sb-location-focus .sb-icon{width:18px;height:18px}
.sb-location-focus[hidden]{display:none}
.sb-location-card{position:relative;display:flex;align-items:center;gap:12px;min-height:62px;padding:8px;border:1px solid var(--sb-line);border-radius:var(--sb-r-md);background:white;box-shadow:var(--sb-sh-1);transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease),border-color var(--sb-d) var(--sb-ease)}
.sb-location-card:hover,.sb-location-card:has(a:focus-visible){transform:translateY(calc(-1 * var(--sb-hover-lift)));border-color:var(--sb-muted-2);box-shadow:var(--sb-sh-2)}
.sb-location-card>img{width:44px;height:44px;object-fit:cover;border-radius:8px;flex-shrink:0}
.sb-location-card>span{flex:1;min-width:0}
.sb-location-card>span>span:not(.sb-location-name){display:block;font-size:13px;line-height:1.35;color:var(--sb-muted)}
.sb-location-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px;line-height:1.3}
.sb-location-title{font-size:15px;font-weight:600;line-height:1.25;color:var(--sb-ink);transition:color var(--sb-d-fast) var(--sb-ease)}
.sb-location-title::after{content:"";position:absolute;inset:0;border-radius:var(--sb-r-md)}
.sb-location-card:hover .sb-location-title{color:var(--sb-primary-deep)}
.sb-location-card small{font-size:12px;line-height:1.3;color:var(--sb-muted)}
.sb-location-card>span>small{display:none}
.sb-location-map-link{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--sb-r-sm);color:var(--sb-primary);flex-shrink:0;transition:color var(--sb-d-fast) var(--sb-ease),background-color var(--sb-d-fast) var(--sb-ease)}
.sb-location-map-link:hover,.sb-location-map-link:focus-visible{background:var(--sb-soft);color:var(--sb-primary-deep)}
@media(min-width:1280px){
.sb-location-card>span>small{display:block}
}
.sb-location-note{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;margin-top:20px;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:white;box-shadow:var(--sb-sh-1)}
/* Below lg the map stacks above the list (Locations.tsx `lg:grid-cols-[1.05fr_1fr]`). */
@media(max-width:1023px){
.sb-location-grid{grid-template-columns:1fr}
.sb-location-grid{--sb-location-height:440px}
.sb-location-grid .sb-map-shell{height:440px;min-height:0}
}
@media(max-width:767px){
.sb-locations{order:5}
.sb-location-grid{margin-top:24px}
.sb-location-grid{--sb-location-height:340px}
.sb-location-grid .sb-map-shell{height:340px}
.sb-location-list{max-height:440px}
.sb-map-caption{max-width:75%;top:16px;left:16px}
.sb-map-caption-title{font-size:20px}
.sb-map-caption-title + p{display:none}
.sb-location-name{gap:4px}
.sb-location-card small{font-size:11px}
.sb-location-card>span>small{display:none}
.sb-location-map-link{margin-inline:4px}
.sb-location-note{align-items:flex-start;flex-direction:column;padding:20px}
}

/* m3-guide */
/* m3-guide — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- M3Guide.tsx: stepped columns, the largest tier tinted -------------------------------- */
.sb-guide-grid{display:grid;gap:16px;margin-top:40px!important;padding:0;list-style:none}
.sb-guide-grid>li{display:flex;flex-direction:column}
.sb-p-m3-guide h2{max-width:24ch}
/* The three IsoBox drawings share one 146x136 frame and grow inside it via the `ladder` scale
   in the SVG transform (M3Guide.tsx `ladder` = 0.6 / 0.8 / 1), so the tiers read as a size ladder. */
.sb-guide-art{flex-shrink:0;width:146px;height:136px}
.sb-guide-art polygon{stroke:var(--sb-muted-2);stroke-linejoin:round}
.sb-guide-value{margin-top:20px;font:600 clamp(1.75rem,1.4rem + 1.4vw,2.5rem)/1 "Bricolage Grotesque",sans-serif}
.sb-guide-band{margin-top:8px!important;font-size:14px;line-height:1.5;color:var(--sb-muted)}
.sb-guide-fits-label{margin-top:20px!important;font-size:14px;line-height:1.5;font-weight:600;color:var(--sb-ink)!important}
@media(min-width:768px){
.sb-guide-grid{grid-template-columns:.85fr 1fr 1.15fr;gap:20px}
}

/* menu */
/* menu — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-menu-block{padding:0;margin:0;list-style:none}
.sb-menu-block a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--sb-ink)}
.sb-menu-block a:hover span{color:var(--sb-primary)}
.sb-menu-block [aria-current=page]{color:var(--sb-primary-deep)}
.sb-menu-inline{display:flex;flex-wrap:wrap;gap:4px 24px}
.sb-p-menu h2+.sb-menu-block{margin-top:16px}

/* newsletter */
/* Typography measured against Popups.tsx: the theme's 1.6 body leading against the reference's
   leading-normal, plus the title's tighter display leading and the font-medium submit label. */
#sb-newsletter h2,#sb-exit-offer h2{line-height:1.15}
#sb-newsletter p,#sb-newsletter label,#sb-newsletter button,
#sb-exit-offer p,#sb-exit-offer a{line-height:1.5}
#sb-newsletter .sb-button,#sb-exit-offer .sb-button{font-weight:500}
#sb-newsletter .sb-popup-note{line-height:1.5}
/* The privacy link is text-primary in the reference, not the muted note colour around it. */
#sb-newsletter .sb-popup-note a,#sb-newsletter .sb-popup-note button{color:#262324}
/* The privacy link inside the note is text-primary, not the muted colour of the sentence. */
#sb-newsletter .sb-popup-privacy{color:#262324}
/* Use the available viewport before adding a scrollbar; retain scrolling on short screens. */
#sb-newsletter{max-height:calc(100dvh - 32px);overflow-x:hidden;overflow-y:auto}
@media(max-height:620px){
#sb-newsletter{padding:20px 24px}
#sb-newsletter .sb-newsletter-form{gap:12px;margin-top:16px}
}
/* The pop-up title is text-2xl in the reference — a fluid ramp that *shrinks* on narrow screens
   (24px at 1280, 21.2px at 560). The theme's mobile `.sb-dialog h2{font-size:30px}` was winning
   here and blowing it up to 30px instead. Matched to the reference at both ends.
   Padding rather than margin for the close-button gutter, so the heading keeps the card's width
   and wraps where the reference wraps (pr-10). */
#sb-newsletter h2,#sb-exit-offer h2{font-size:clamp(1.25rem,1.19rem + 0.39vw,1.5rem);padding-right:40px}
/* The newsletter title starts the card; the exit offer's sits under the seal (see that block). */
#sb-newsletter h2{margin:0}
/* CtaIcon sits before the label in the reference; the markup puts it after. */
#sb-newsletter .sb-button .sb-icon,#sb-exit-offer .sb-button .sb-icon{order:-1}

/* The consent row.
   `.sb-popup .sb-newsletter-form label{display:grid}` sets every label in this form to stack its
   caption over its control, which is right for the name and email boxes and wrong for a checkbox:
   it put the box on its own line above the sentence it belongs to. The rule it needs is a row.
   It is written here rather than relied on from the quote form's stylesheet, because that one only
   loads on pages carrying a quote form and this pop-up is on every page. */
.sb-popup .sb-newsletter-form label.sb-consent{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px;border:2px solid var(--sb-line);border-radius:var(--sb-r-sm);background:var(--sb-bg);font-weight:400}
.sb-popup .sb-newsletter-form label.sb-consent input{width:18px;height:18px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--sb-primary)}
.sb-popup .sb-newsletter-form label.sb-consent span{font-size:13px;line-height:1.5;font-weight:400;color:var(--sb-ink-2)}
.sb-popup .sb-newsletter-form label.sb-consent:has(input:checked){border-color:var(--sb-primary);background:var(--sb-primary-select)}

/* page-intro */
/* PageIntro.tsx — moved out of assets/css/pages.css, rule for rule. Loads only where the block is. */
.sb-page-intro{display:grid;gap:32px;padding-top:8px!important;padding-bottom:56px!important}
.sb-page-intro h1{max-width:24ch}
.sb-page-intro .sb-prose{line-height:1.625}
.sb-page-intro>div:first-child>.sb-text-link{gap:6px;margin-top:12px;font-size:15px;color:var(--sb-primary)}
.sb-page-intro>div:first-child>.sb-text-link .sb-icon{width:15px;height:15px;transition:transform var(--sb-d-fast) var(--sb-ease)}
.sb-page-intro>div:first-child>.sb-text-link:hover{color:var(--sb-primary-deep)}
.sb-page-intro>div:first-child>.sb-text-link:hover .sb-icon{transform:translateX(4px)}
.sb-page-intro .sb-buttons{margin-top:32px}
.sb-page-intro-photo{border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);overflow:hidden;box-shadow:var(--sb-sh-2)}
.sb-page-intro-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* The size pages' range card takes the photo's place. */
.sb-range-cell{overflow:hidden;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:#fff;box-shadow:var(--sb-sh-2)}
.sb-range-art{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(to bottom,var(--sb-soft),#fff)}
.sb-range-art img{height:100%;width:auto;max-width:none;transform:translateY(10%)}
.sb-range-body{padding:24px}
/* The reference sets the range on its own display ramp (--t-display in app/globals.css), a step
   above the h2 scale, so the m³ figure is the loudest thing in the cell. */
.sb-range-figure{font:600 clamp(2.75rem,1.75rem + 3.5vw,4.25rem)/.95 "Bricolage Grotesque",sans-serif;color:var(--sb-ink)!important}
.sb-range-body p+p{margin-top:12px;font-size:15px;line-height:1.625;color:var(--sb-ink-2)}

/* Inside a column (the /cotizar/ layout), the intro gives its bottom room to the form below it. */
.wp-block-column .sb-page-intro .sb-prose{max-width:60ch}
.wp-block-columns:has(.sb-p-quote-form) .sb-page-intro{padding-top:8px!important;padding-bottom:0!important}
.wp-block-columns:has(.sb-p-quote-form) .sb-page-intro .sb-prose{margin-top:12px;line-height:1.625}
.wp-block-columns:has(.sb-p-quote-form) .sb-page-intro h1{max-width:none}

@media(min-width:768px){
    .sb-range-body{padding:28px}
    .sb-page-intro{padding-bottom:80px!important}
}
@media(min-width:1024px){
    .sb-page-intro{grid-template-columns:1.15fr 1fr;gap:56px}
    .sb-page-intro-plain{grid-template-columns:1fr}
    .sb-page-intro-aside{grid-template-columns:1.4fr 1fr;align-items:center}
    /* `lg:h-full lg:min-h-[380px]`: the plate fills the row the text column sets, never its own
       intrinsic ratio. The img is taken out of flow so `height:100%` has a definite box to resolve
       against — otherwise a square source renders square and the section grows with it. */
    .sb-page-intro-photo:not(.sb-page-intro-whole){position:relative;min-height:380px}
    .sb-page-intro-photo:not(.sb-page-intro-whole) img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;min-height:0}
    /* wholePhoto: the plate is shown whole and centred, never cropped to the text column's height. */
    .sb-page-intro-whole{align-self:center}
    .sb-page-intro-whole img{aspect-ratio:3/2;min-height:0}
}

/* price-band */
/* price-band — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- PriceBand.tsx ----------------------------------------------------------------------- */
.sb-p-price-band{border-block:1px solid var(--sb-line);background:#fff}
.sb-price-band{display:flex;flex-direction:column;gap:24px}
.sb-price-band p{margin-top:12px;max-width:60ch;font-size:16px;line-height:1.625;color:var(--sb-ink-2)}
.sb-price-band-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex-shrink:0}
.sb-price-link>span{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size var(--sb-d-fast) var(--sb-ease)}
.sb-price-link:hover{color:var(--sb-primary-deep)}
.sb-price-link:hover>span{background-size:100% 1px}
@media(min-width:640px){
.sb-price-band-actions{flex-direction:row;align-items:center;gap:24px}
}
@media(min-width:1024px){
.sb-price-band{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:56px}
}

/* price-factors */
/* price-factors — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- PriceFactors.tsx: 2x2 list, not four cards ------------------------------------------ */
.sb-factor-grid{display:grid;gap:32px 48px;margin-top:40px;padding:0;list-style:none}
.sb-factor-grid>li{display:flex;align-items:flex-start;gap:16px}
.sb-factor-grid h3{font-size:20px;line-height:28px}
.sb-factor-grid p{margin-top:4px;max-width:44ch;font-size:15px;line-height:1.625;color:var(--sb-ink-2)}
@media(min-width:768px){
.sb-factor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.sb-p-price-factors{border-block:1px solid var(--sb-line);background:#fff}
.sb-p-price-factors h2{max-width:none}
.sb-p-price-factors .sb-factor-grid{margin-top:0;padding-top:40px;transform:translateY(12px)}

/* price-table */
/* price-table — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- PriceTable.tsx: a real table that stacks into rows below md ------------------------- */
.sb-price-table{margin-top:40px;overflow:hidden;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:#fff;box-shadow:var(--sb-sh-1)}
.sb-price-table table{width:100%;border-collapse:collapse;text-align:left}
.sb-price-table thead tr{border-bottom:1px solid var(--sb-line);background:var(--sb-soft)}
.sb-price-table th[scope=col]{padding:16px 24px;font-size:13px;font-weight:500;line-height:1.5;color:var(--sb-ink-2)}
.sb-price-table tbody tr+tr{border-top:1px solid var(--sb-line)}
.sb-price-table th[scope=row]{padding:20px 24px;vertical-align:top;font:600 18px/1.2 "Bricolage Grotesque",sans-serif}
.sb-price-table td{padding:20px 24px;vertical-align:top;font-size:15px;line-height:1.6;color:var(--sb-ink-2)}
.sb-price-table td:nth-child(3){padding-block:12px}
.sb-price-table td strong{font-size:16px;color:var(--sb-ink);white-space:nowrap}
.sb-price-table td small{display:block;margin-top:4px;font-size:13px;color:var(--sb-muted)}
@media(max-width:767px){
.sb-price-table thead{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.sb-price-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding:20px}
.sb-price-table th[scope=row]{grid-column:1/-1;padding:0}
.sb-price-table td{padding:0}
.sb-price-table td:last-child{grid-column:1/-1}
.sb-price-table td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:12px;color:var(--sb-muted)}
}
.sb-p-price-table h2{max-width:none}

/* quote-form */
/* quote-form — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- QuoteForm.tsx ---------------------------------------------------------------------- */
.sb-page-quote{display:grid;gap:18px;max-width:640px;margin-top:32px;padding:28px;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:#fff;box-shadow:var(--sb-sh-1)}
.sb-page-quote label{display:block;font-size:14px;font-weight:500}
/* fieldClass() in lib/controls.ts: 48px tall, rounded-xl, 16px text, 16px inline padding. */
/* `:not(.screen-reader-text)` keeps the spam honeypot out: it is a text input, and stretching it to
   100% pushed the document one viewport wider on every /cotizar/ and /contacto/ render. */
.sb-page-quote input:not([type=radio]):not([type=checkbox]):not(.screen-reader-text),.sb-page-quote select{display:block;width:100%;height:48px;margin-top:6px;padding:0 16px;border:2px solid var(--sb-line);border-radius:12px;background:var(--sb-bg);font-size:16px;font-weight:400;color:var(--sb-ink)}
/* The reference draws its own caret: the native one was "el mayor delator de 'campo sin diseñar'". */
.sb-page-quote select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233a3c46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px 16px}
/* The celular example sits under the field, so it survives the first keystroke. */
.sb-page-quote .sb-field-hint{display:block;margin-top:8px;font-size:13px;font-weight:400;color:var(--sb-ink-2)}
/* fieldClass('filled'): a field that has been typed into settles from the soft `--bg` well to white
   with a `--muted-2` edge. Every field here is `required`, so :valid is exactly "has content"; the
   honeypot is not required, which keeps it out. */
.sb-page-quote input:required:valid:not([type=radio]):not([type=checkbox]),
.sb-page-quote textarea:required:valid{border-color:var(--sb-muted-2);background-color:var(--sb-surface)}
/* fieldClass('chosen') in lib/controls.ts: a select answers a question the way a radio does, so a
   picked sede takes the same yellow as a picked chip. The placeholder option is `value="" disabled`
   on a required select, so :invalid is exactly "nothing chosen yet" — no JS needed. `background-color`
   only, so the hand-drawn caret background-image above survives. */
.sb-page-quote select:required:valid{border-color:var(--sb-primary);background-color:var(--sb-primary-select)}
/* Hover lives only on the branch that has not been answered yet (controls.ts): over a chosen select
   it overwrote border-primary and made the choice look undone. */
.sb-page-quote input:not([type=radio]):not([type=checkbox]):hover,.sb-page-quote select:invalid:hover{border-color:var(--sb-muted-2)}
.sb-page-quote fieldset{margin:0;padding:0;border:0}
.sb-page-quote legend{padding:0;font-size:14px;font-weight:500}
.sb-chip-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sb-page-quote .sb-chip-choices .sb-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;transition:border-color var(--sb-d-fast) var(--sb-ease),background-color var(--sb-d-fast) var(--sb-ease),box-shadow var(--sb-d-fast) var(--sb-ease)}
.sb-page-quote .sb-chip-choices .sb-chip:has(input:checked){border-color:var(--sb-primary);background:var(--sb-primary-select);box-shadow:var(--sb-sh-2)}
.sb-page-quote .sb-chip-choices .sb-chip:has(input:checked) span{font-weight:600}
.sb-page-quote .sb-chip-choices .sb-chip:has(input:checked)::before{content:"";width:18px;height:18px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23262324'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center/contain no-repeat}
.sb-chip-choices input{position:absolute;width:1px;height:1px;opacity:0}
/* Explicit state also supports browsers without :has(). */
.sb-page-quote .sb-chip-choices .sb-chip.is-selected,.sb-page-quote .sb-quote-sizes label.is-selected,.sb-page-quote .sb-consent.is-selected{border-color:var(--sb-primary);background:#faf7be;box-shadow:var(--sb-sh-2)}
.sb-page-quote .sb-chip-choices .sb-chip.is-selected span{font-weight:600}
.sb-page-quote .sb-chip-choices .sb-chip.is-selected::before{content:"";width:18px;height:18px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23262324'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center/contain no-repeat}
/* .sb-page-quote label sets 14px, so the consent well needs the extra class to win at 13px. */
.sb-page-quote .sb-consent,.sb-consent{display:flex;align-items:flex-start;gap:12px;padding:12px;border:2px solid var(--sb-line);border-radius:8px;background:var(--sb-bg);font-size:13px;font-weight:400!important}
.sb-consent:has(input:checked){border-color:var(--sb-primary);background:var(--sb-primary-select)}
.sb-consent input{width:20px;height:20px;flex-shrink:0;margin-top:2px;accent-color:var(--sb-primary)}
.sb-consent span{font-size:13px;line-height:1.5;color:var(--sb-ink-2)}
@media(min-width:768px){
.sb-page-quote{padding:32px}
}
/* ---- ContactoPage.tsx / CotizarPage.tsx: intro, qualifying form, NAP rail and sede map -----
   Reference wrapper: `mx-auto grid max-w-site gap-8 px-5 pb-14 pt-2 md:px-8 md:pb-20
   lg:grid-cols-[1.4fr_1fr] lg:items-start lg:gap-10 lg:px-10` — a single column until lg.
   The column basis has to stay inside the lg query: it carries `!important` (core's own column
   rules do), so ungated it also beat core's `flex-basis:100%!important` mobile stacking and left
   the form and the rail side by side at 390px. */
.wp-block-columns:has(.sb-p-quote-form){width:min(100%,1280px)!important;max-width:1280px!important;gap:32px!important;margin-inline:auto!important;padding:0 20px 56px!important}
@media(min-width:768px){
.wp-block-columns:has(.sb-p-quote-form){padding:0 32px 80px!important}
}
@media(max-width:1023px){
.wp-block-columns:has(.sb-p-quote-form)>.wp-block-column{flex-basis:100%!important}
}
@media(min-width:1024px){
.wp-block-columns:has(.sb-p-quote-form){align-items:stretch!important;gap:40px!important;padding:0 40px 80px!important}
.wp-block-columns:has(.sb-p-quote-form)>.wp-block-column:first-child{flex-basis:calc((100% - 40px)*.58333)!important}
.wp-block-columns:has(.sb-p-quote-form)>.wp-block-column:last-child{flex-basis:calc((100% - 40px)*.41667)!important}
}
.wp-block-columns:has(.sb-p-quote-form)>.wp-block-column:last-child{display:flex;flex-direction:column}
.wp-block-columns:has(.sb-p-quote-form) .sb-page-quote{max-width:none;margin-top:32px;padding:22px;gap:28px}
@media(min-width:768px){
.wp-block-columns:has(.sb-p-quote-form) .sb-page-quote{padding:32px 32px 42px}
}
/* QuoteForm.tsx: `grid gap-2 sm:grid-cols-2` — one column below Tailwind's sm. */
.sb-quote-sizes>div{display:grid;gap:8px;margin-top:8px}
@media(min-width:640px){
.sb-quote-sizes>div{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.sb-page-quote .sb-quote-sizes label{display:flex!important;min-height:72px;cursor:pointer;flex-direction:column;align-items:flex-start;justify-content:center;border:2px solid var(--sb-line);border-radius:var(--sb-r-md);padding:12px 16px;color:var(--sb-ink);font-size:16px}
.sb-quote-size-name{font-size:15px;font-weight:600;line-height:22.5px}
.sb-quote-size-hint{font-size:13px;line-height:19.5px;color:var(--sb-ink-2)}
.sb-quote-sizes label:has(input:checked){border-color:var(--sb-primary);background:var(--sb-primary-select)}
/* QuoteForm.tsx: the name row is `flex items-center justify-between` with the CheckCircle at its
   right and the label going font-bold, so the size card answers the same way a chip does. The mark
   rides the name span (not the label) because the label is the column that also holds the hint.
   `.is-selected` repeats it for browsers without :has(), the way the chip rules do. */
.sb-page-quote .sb-quote-sizes label:has(input:checked) .sb-quote-size-name,
.sb-page-quote .sb-quote-sizes label.is-selected .sb-quote-size-name{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;font-weight:700}
.sb-page-quote .sb-quote-sizes label:has(input:checked) .sb-quote-size-name::after,
.sb-page-quote .sb-quote-sizes label.is-selected .sb-quote-size-name::after{content:"";width:18px;height:18px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23262324'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center/contain no-repeat}
.sb-quote-sizes input{position:absolute;width:1px;height:1px;opacity:0}
.sb-quote-sizes .sb-quote-unsure{grid-column:1/-1;min-height:48px}
.sb-quote-calc-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;font-size:14px;font-weight:500;color:var(--sb-primary)}
.sb-quote-calc-link:hover{color:var(--sb-primary-deep)}
/* QuoteForm.tsx: `grid gap-4 sm:grid-cols-2`. */
.sb-quote-contact>div{display:grid;gap:16px}
@media(min-width:640px){
.sb-quote-contact>div{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.sb-quote-contact label{font-size:13px!important;font-weight:400!important;color:var(--sb-ink-2)}
/* The policy link sits mid-sentence, so it has to lay out as text: the theme's .sb-text-link is an
   inline-flex 44px tap target, which turned a two-line consent box into a 92px one. The 44px rule
   is for standalone links; here the whole label is already the tap target. */
.sb-page-quote .sb-consent .sb-text-link{display:inline;min-height:0;padding:0;font-size:inherit;line-height:inherit;vertical-align:baseline}
/* Typography measured against QuoteForm.tsx. The theme's body leading is 1.6; the reference form
   runs on 1.5 (leading-normal) with leading-relaxed reserved for the consent paragraph. */
.sb-page-quote,.sb-page-quote label,.sb-page-quote legend,.sb-page-quote .sb-chip,
.sb-page-quote .sb-chip span,.sb-page-quote button,.sb-page-quote .sb-quote-calc-link,
.sb-page-quote .sb-quote-size-name,.sb-page-quote .sb-quote-size-hint,.sb-page-quote .sb-field-hint{line-height:1.5}
.sb-page-quote .sb-consent,.sb-page-quote .sb-consent span{line-height:1.625}
/* The policy link is font-medium inside the sentence. */
.sb-page-quote .sb-consent .sb-text-link{font-weight:500}
/* "Te respondemos…" is text-[14px] text-ink-2, not the 13px muted note the class gives it. */
.sb-page-quote>.sb-small{font-size:14px;line-height:1.5;color:var(--sb-ink-2)}
/* The "Calcular mi espacio" link is text-primary in the reference; the label span was picking up
   the inherited ink instead. */
.sb-page-quote .sb-quote-calc-link,.sb-page-quote .sb-quote-calc-link span{color:#262324}
@media(max-width:767px){
.sb-page-quote{padding:22px}
}

/* reviews */
/* reviews — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-review-track{display:flex;gap:20px;overflow:auto;scroll-snap-type:x mandatory;margin-top:40px;padding:0 0 8px}
.sb-review{flex:0 1 auto;scroll-snap-align:start;display:flex;flex-direction:column;min-width:85%;transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease)}
.sb-review:hover{transform:translateY(calc(-1 * var(--sb-hover-lift)));box-shadow:var(--sb-sh-2)}
.sb-review p{margin-top:0}
.sb-stars{display:flex;gap:2px;font-size:14px;line-height:14px}
.sb-review blockquote{margin:16px 0 0;font-size:15px;line-height:1.625;color:var(--sb-ink-2)}
.sb-stars{color:var(--sb-ink)!important;letter-spacing:0}
.sb-review-author{display:flex;align-items:center;gap:12px;border-top:1px solid var(--sb-line);padding-top:16px;margin-top:auto;font-size:16px;line-height:24px}
.sb-avatar{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border:1px solid var(--sb-line);background:var(--sb-bg);border-radius:50%;font-size:12px;font-weight:600;line-height:18px;color:var(--sb-muted)}
.sb-review-author strong{font-size:13px;font-weight:600;line-height:19.5px}
.sb-review-author small{margin-left:auto;color:var(--sb-muted);font-size:12px;line-height:18px}
.sb-review-source,.sb-review-hint{display:inline-flex;align-items:center;gap:8px}
.sb-review-source{line-height:19.5px}
.sb-review-hint-desktop{display:none}
.sb-review-rule{display:block;width:min(320px,100%);height:1px;margin-top:20px;background:var(--sb-line)}
@media(min-width:640px){
.sb-review{min-width:380px}
}
/* Once home.js has put arrows and dots under the row, they say "there is more" better than a
   sentence does, so the drag hint steps aside. Without the script it is the only signal and stays. */
.sb-carousel-ready .sb-review-hint{display:none}
@media(max-width:767px){
.sb-reviews{order:10}
.sb-review{flex-basis:86%;padding:24px}
}

/* security-features */
/* security-features — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- SecurityFeatures.tsx: five cells, CCTV the tall photo cell -------------------------- */
.sb-security-bento{display:grid;gap:16px;margin-top:40px;padding:0;list-style:none}
.sb-security-bento>li{display:flex;flex-direction:column;gap:20px}
.sb-security-bento h3{font-size:20px}
.sb-security-bento p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--sb-ink-2)}
.sb-security-lead{padding:0!important;gap:0!important;overflow:hidden}
.sb-security-photo{width:100%;aspect-ratio:16/10;object-fit:cover}
.sb-security-lead h3{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.3rem,1.2rem + .6vw,1.5rem)}
.sb-security-lead p{max-width:48ch;font-size:16px}
@media(min-width:768px){
.sb-security-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sb-security-lead{grid-column:1/-1}
}
@media(min-width:1024px){
.sb-security-bento{grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:repeat(2,auto)}
.sb-security-lead{grid-column:auto;grid-row:span 2}
.sb-security-photo{aspect-ratio:auto;flex:1;min-height:240px}
}

/* security-teaser */
/* security-teaser — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- SecurityTeaser.tsx: the page's one dark cell ----------------------------------------- */
.sb-security-teaser{display:grid;gap:32px;padding:28px;box-shadow:var(--sb-sh-3)}
.sb-security-teaser h2{margin-top:20px;max-width:24ch}
.sb-security-teaser p{margin-top:12px;max-width:56ch;font-size:16px;line-height:1.7}
@media(min-width:1024px){
.sb-security-teaser{grid-template-columns:1.3fr 1fr;align-items:center;gap:56px;padding:40px}
}
@media(max-width:767px){
.sb-security-teaser{padding:22px}
}

/* sede-featured */
/* sede-featured — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- SedeFeatured.tsx -------------------------------------------------------------------- */
.sb-featured-sede{display:grid;overflow:hidden;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:#fff;box-shadow:var(--sb-sh-1)}
.sb-featured-sede>img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sb-featured-sede>div{display:flex;flex-direction:column;align-items:flex-start;padding:24px}
.sb-featured-sede h2{margin-top:16px}
.sb-featured-sede address{margin-top:8px;font-size:15px;font-style:normal;color:var(--sb-ink-2)}
.sb-featured-facts{margin-top:16px!important;font-size:15px;font-weight:500;color:var(--sb-ink)!important}
.sb-featured-sede>div>p:last-of-type{margin-top:8px;max-width:48ch;font-size:15px}
.sb-featured-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:auto;padding-top:28px}
@media(min-width:768px){
.sb-featured-sede{grid-template-columns:1.1fr 1fr}
.sb-featured-sede>img{aspect-ratio:auto;height:340px;min-height:340px}
.sb-featured-sede>div{padding:32px}
}
.sb-p-sede-featured .sb-featured-sede{transform:translateY(12px)}
.sb-featured-map-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;border-radius:2px;font-size:15px;font-weight:500;color:var(--sb-primary)}
.sb-featured-map-link:hover{color:var(--sb-primary-deep)}
@media(max-width:767px){
.sb-featured-sede>div{padding:22px}
}

/* sede-gallery */
/* sede-gallery — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- SedeGallery.tsx: bento shaped by how many photos the sede has ----------------------- */
.sb-sede-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sb-gallery-cell{margin:0;overflow:hidden;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg)}
.sb-gallery-cell img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
.sb-gallery-cell:first-child{grid-column:span 2}
.sb-sede-gallery[data-count="2"] .sb-gallery-cell:nth-child(2),
.sb-sede-gallery[data-count="4"] .sb-gallery-cell:nth-child(2){grid-column:span 2}
.sb-gallery-cell:first-child img,.sb-sede-gallery[data-count="2"] .sb-gallery-cell:nth-child(2) img,
.sb-sede-gallery[data-count="4"] .sb-gallery-cell:nth-child(2) img{aspect-ratio:16/10}
@media(min-width:768px){
.sb-sede-gallery{gap:16px}
}
@media(min-width:1024px){
.sb-sede-gallery{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,1fr);height:520px}
.sb-gallery-cell img{aspect-ratio:auto}
.sb-sede-gallery [data-count] .sb-gallery-cell{grid-column:span 1}
.sb-sede-gallery .sb-gallery-cell:first-child{grid-column:span 2;grid-row:span 2}
.sb-sede-gallery[data-count="1"] .sb-gallery-cell:first-child{grid-column:span 4}
.sb-sede-gallery[data-count="2"] .sb-gallery-cell:nth-child(2){grid-column:span 2;grid-row:span 2}
.sb-sede-gallery[data-count="3"] .sb-gallery-cell:not(:first-child){grid-column:span 2}
.sb-sede-gallery[data-count="4"] .sb-gallery-cell:nth-child(2){grid-column:span 2}
}
/* SedeGallery.tsx: `pb-14 md:pb-20`, no top padding — the hero above it already closes on pb-8. */
.sb-p-sede-gallery>.sb-wrap{padding-block:0 56px}
@media(min-width:768px){.sb-p-sede-gallery>.sb-wrap{padding-block:0 80px}}

/* sede-grid */
/* sede-grid — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* mt-4 on the zone chips. Scoped, because `.sb-section ul{margin:0}` in home.css out-specifies the
   bare class and collapsed the gap between the addresses and the chips. */
.sb-sede-cell .sb-chip-row-small{margin-top:16px}
.sb-chip-row-small{gap:6px}
.sb-chip-row-small li{padding:2px 10px;font-size:12px;line-height:18px}
/* SedeGrid.tsx heading: text-2xl (--t-2xl), and no measure cap — the shared .sb-h2-small is a
   size larger and clamps at 34ch, which left "Dónde estamos" a quarter of the row. */
.sb-p-sede-grid>.sb-wrap>h2{max-width:none;font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem)!important;line-height:1.15}
/* ---- SedeGrid.tsx: bento, the multi-point sede tall -------------------------------------- */
.sb-sede-bento{display:grid;gap:16px;margin-top:24px;padding:0;list-style:none}
.sb-sede-cell{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:#fff;box-shadow:var(--sb-sh-1);transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease),border-color var(--sb-d) var(--sb-ease)}
.sb-sede-cell:hover{transform:translateY(calc(-1 * var(--sb-hover-lift)));border-color:var(--sb-muted-2);box-shadow:var(--sb-sh-2)}
.sb-sede-cell-photo{width:100%;aspect-ratio:16/9;object-fit:cover}
/* The tall cell shows a 4:3 plate on phones; only from md does it stretch to fill the column. */
.sb-sede-cell-tall .sb-sede-cell-photo{aspect-ratio:4/3}
.sb-sede-cell h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font-family:"Bricolage Grotesque",sans-serif;font-size:20px;line-height:28px}
.sb-sede-cell h3 a::after{position:absolute;inset:0;content:""}
.sb-sede-cell h3 small{font-family:Inter,sans-serif;font-size:13px;font-weight:500;color:var(--sb-muted)}
.sb-sede-cell:hover h3 a{color:var(--sb-primary-deep)}
.sb-sede-cell address{display:flex;flex-direction:column;align-items:flex-start;margin-top:8px;font-style:normal}
.sb-sede-cell address a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;line-height:1.35;color:var(--sb-ink-2)}
.sb-sede-cell address a:hover span{color:var(--sb-primary-deep)}
@media(min-width:768px){
.sb-sede-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:20px}
.sb-sede-cell-tall{grid-row:span 2}
/* Four cards or more: three rows, the tall cell spanning all of them, so the rest stack beside it
   instead of wrapping back under it (SedeGrid.tsx grid-rows-3 / row-span-3). */
.sb-sede-bento-3{grid-template-rows:repeat(3,minmax(0,1fr))}
.sb-sede-bento-3 .sb-sede-cell-tall{grid-row:span 3}
/* `md:aspect-auto md:min-h-[240px] md:flex-1` on the photo, `md:flex-none` on the body: the tall
   cell's photo takes whatever height the column has left, instead of a fixed 240px band with a
   long run of empty card under it. */
/* `height:0` with the grow, not `height:auto`: the reference's photo is absolutely positioned, so it
   contributes nothing to min-content. Left at auto, the image's intrinsic height feeds back into the
   1fr rows and every cell in the column inflates with it. */
.sb-sede-cell-tall .sb-sede-cell-photo{flex:1 1 0;height:0;min-height:240px;aspect-ratio:auto}
.sb-sede-cell-tall .sb-card-body{flex:none}
}
@media(min-width:640px){
.sb-sede-cell:not(.sb-sede-cell-tall){flex-direction:row}
.sb-sede-cell:not(.sb-sede-cell-tall) .sb-sede-cell-photo{width:40%;flex-shrink:0;aspect-ratio:auto;height:100%}
}
/* The grid's own mt-6. Scoped, because `.sb-section ul{margin:0}` in home.css out-specifies the
   bare class; this used to be faked with padding-top plus a translateY, which shifted the whole
   bento off its row. */
.sb-p-sede-grid .sb-sede-bento{margin-top:24px}
/* SedeGrid.tsx `more`: mt-6, min-h-11, the same text link as every other "ver todo". */
.sb-sede-bento-more{margin-top:24px;min-height:44px;font-size:15px}
/* "Ver detalles" is a span inside the card link, not a tap target of its own: no 44px floor, and
   the reference's text-[14px] leading (21px), not the .sb-text-link default. */
.sb-sede-cell .sb-text-link{min-height:0;line-height:21px}
/* /quienes-somos/ wraps the grid in `pt-14 md:pt-20` to clear the team band above it; /sedes/ has
   no such wrapper, so the lead-in hangs off the pairing rather than the block. */
.sb-p-team + .sb-p-sede-grid > .sb-wrap{padding-top:56px}
@media(min-width:768px){
.sb-p-team + .sb-p-sede-grid > .sb-wrap{padding-top:80px}
}

/* sede-hero */
/* sede-hero — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- SedeHero.tsx ------------------------------------------------------------------------ */
.sb-sede-meta{display:flex;flex-direction:column;gap:8px 32px;margin-top:12px;font-size:16px;color:var(--sb-ink-2)}
.sb-sede-meta address{display:flex;flex-direction:column;gap:2px;font-style:normal}
.sb-sede-meta p{display:inline-flex;align-items:center;gap:8px}
@media(min-width:768px){
.sb-sede-meta{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
}
/* SedeHero.tsx: `px-5 pb-8 pt-2` — a tight lead-in under the breadcrumb, not the shared 48px
   section padding the block inherited from .sb-pad-small. */
.sb-p-sede-hero>.sb-wrap{padding-block:8px 32px}
/* `mb-3 bg-accent px-2.5 py-1 text-[12px] font-medium`: the brand chip, not the kraft badge. */
.sb-p-sede-hero .sb-badge{margin-bottom:12px;padding:4px 10px;font-size:12px;font-weight:500;line-height:1.5;background:var(--sb-yellow);color:var(--sb-on-brand)}
/* The address and the hours sit on the inherited 1.5 leading, not the .sb-section 1.6. */
.sb-p-sede-hero .sb-sede-meta,.sb-p-sede-hero .sb-sede-meta address,.sb-p-sede-hero .sb-sede-meta p{line-height:1.5}

/* sede-location */
/* sede-location — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-p-sede-location .leaflet-container{font-family:Inter,system-ui,sans-serif;background:var(--sb-bg);z-index:0;isolation:isolate}
.sb-p-sede-location .leaflet-popup-content-wrapper,.sb-p-sede-location .leaflet-popup-tip{background:var(--sb-surface);color:var(--sb-ink)}
.sb-p-sede-location .leaflet-popup-content-wrapper{border-radius:var(--sb-r-md);box-shadow:var(--sb-sh-3)}
.sb-p-sede-location .leaflet-popup-content a{display:inline-flex;align-items:center;min-height:44px;color:var(--sb-yellow);font-weight:500}
.sb-p-sede-location .leaflet-bar a{color:var(--sb-ink);background:var(--sb-surface);border-color:var(--sb-line)}
.sb-p-sede-location .leaflet-control-attribution{background:rgba(20,22,27,.75);color:var(--sb-muted)}
.sb-p-sede-location .leaflet-control-attribution a{color:var(--sb-ink-2)}
.sb-location-split{display:grid;gap:20px;margin-top:32px}
.sb-point-list{display:grid;gap:12px;padding:0;margin:0;list-style:none;align-content:start}
.sb-point-list>li{padding:20px}
.sb-point-list h3{font-family:"Bricolage Grotesque",sans-serif;font-size:18px}
.sb-point-list address{margin-top:4px;font-size:15px;font-style:normal;color:var(--sb-ink-2)}
.sb-point-links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:8px}
.sb-p-sede-location{border-top:1px solid var(--sb-line)}
.sb-p-sede-location h2{max-width:none}
/* SedeLocation.tsx: a single-point card lays out as a row from md (`md:flex md:items-center
   md:justify-between md:gap-6`), which is what the hardcoded 140.5px height was standing in for. */
.sb-p-sede-location .sb-point-list>li{height:auto;min-height:0;padding:20px}
.sb-p-sede-location .sb-point-list h3{margin-top:0;font-size:18px;line-height:28px}
.sb-p-sede-location .sb-point-list address{line-height:1.5}
.sb-p-sede-location .sb-point-links{margin-top:12px}
@media(min-width:768px){
.sb-location-split:not(.sb-location-split-multi) .sb-point-list>li{display:flex;align-items:center;justify-content:space-between;gap:24px}
.sb-p-sede-location .sb-point-links{margin-top:0}
/* Several points: two columns at md, back to one at lg where the list sits beside the map. */
.sb-location-split-multi .sb-point-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1024px){
.sb-location-split-multi .sb-point-list{grid-template-columns:1fr}
}

/* sedes-hero */
/* sedes-hero — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-map-shell-wide{margin-top:32px}

/* segments */
/* segments — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* Mirrors SegmentStrip.tsx: light card, icon+title / body / link, photo closing the card. */
.sb-segment-card{display:flex;flex-direction:column;height:100%;padding:32px;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:var(--sb-surface);box-shadow:var(--sb-sh-1);cursor:pointer;transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease),border-color var(--sb-d) var(--sb-ease)}
.sb-segment-card-soft{background:var(--sb-soft)}
.sb-segment-card:hover{transform:translateY(calc(-1 * var(--sb-hover-lift)));box-shadow:var(--sb-sh-2)}
.sb-segment-card:active{transform:scale(.98)}
.sb-segment-head{display:flex;flex-direction:column;align-items:flex-start}
.sb-segment-card h3{display:flex;align-items:center;gap:12px;line-height:1.15;letter-spacing:normal;color:var(--sb-ink);transition:color var(--sb-d-fast) var(--sb-ease)}
.sb-segment-card:hover h3{color:var(--sb-primary)}
.sb-segment-card p{margin-top:12px;max-width:46ch;font-size:15px;line-height:1.625;color:var(--sb-ink-2)}
.sb-segment-more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:14px;font-weight:500;color:var(--sb-primary)}
.sb-segment-card:hover .sb-segment-more{color:var(--sb-primary-deep)}
.sb-segment-photo{margin-top:24px;flex:1;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border:1px solid var(--sb-line);border-radius:var(--sb-r-md)}
.sb-segment-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform var(--sb-d-slow) ease-in-out}
.sb-segment-card:hover .sb-segment-photo img,.sb-segment-card:focus-visible .sb-segment-photo img{transform:scale(var(--sb-photo-zoom))}
@media(min-width:768px){
.sb-segment-card{padding:40px}
}
/* lg+: title left, link at the row's right end, body spanning below. */
@media(min-width:1024px){
.sb-segment-head{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px}
.sb-segment-card h3{grid-column:1;grid-row:1}
.sb-segment-card p{grid-column:1/span 2;grid-row:2}
.sb-segment-more{grid-column:2;grid-row:1;margin-top:0}
}
@media(max-width:767px){
.sb-segments{order:8}
}

/* services */
/* services — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* Reference uses text-xl on the side service cards and text-lg on the size cards. */
.sb-service-side h3{font-size:1.25rem;line-height:28px;letter-spacing:normal}
/* SiloDoors.tsx bento: dark featured cell (2/3) + side column (1/3). */
.sb-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px}
.sb-service-feature{grid-column:span 2}
.sb-service-feature{padding:32px;border:0;display:flex;flex-direction:column;box-shadow:var(--sb-sh-3);transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease)}
.sb-service-feature:hover{transform:translateY(calc(-1 * var(--sb-hover-lift)))}
.sb-service-feature:active{transform:scale(.98)}
.sb-service-feature h3{font-family:"Bricolage Grotesque",sans-serif;letter-spacing:-.02em;max-width:none}
.sb-service-feature>p{margin-top:8px;max-width:52ch;font-size:15px;line-height:1.625;color:var(--sb-ink-2)}
.sb-card-top{display:flex;justify-content:space-between;align-items:center;color:var(--sb-yellow)}
/* SiloDoors.tsx featured cell: the stretched title link means the card owns the hover, so the title,
   the CTA label and its arrow all react from the cell, exactly as the side doors do. */
.sb-service-feature:hover h3{color:var(--sb-primary)}
.sb-service-side{display:grid;gap:20px;grid-template-rows:auto 1fr}
.sb-service-door:hover h3{color:var(--sb-primary)}
/* Reference photo is flex-1 with a 140px floor, not a fixed height. */
.sb-service-photo{width:100%;flex:0 0 140px;min-height:140px;height:140px!important;object-fit:cover;border:1px solid var(--sb-line);border-radius:var(--sb-r-md);margin-top:20px}
/* The title link is stretched over the whole cell; the gallery sits above it so its dots and the
   pause button drive the gallery instead of navigating (SiloDoors.tsx). */
.sb-service-feature{position:relative}
.sb-feature-link::after{content:"";position:absolute;inset:0;border-radius:var(--sb-r-lg)}
.sb-service-feature:has(.sb-feature-link:focus-visible){outline:2px solid var(--sb-ring);outline-offset:2px}
.sb-feature-link:focus-visible{outline:none}
.sb-gallery{position:relative;z-index:1;aspect-ratio:2/1;margin-top:20px;overflow:hidden;border:1px solid var(--sb-line);border-radius:var(--sb-r-md);background:#252830}
.sb-gallery:after{content:"";position:absolute;inset:0;background:var(--sb-soft);opacity:.25;mix-blend-mode:multiply;pointer-events:none}
.sb-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity var(--sb-d-slow) var(--sb-ease),visibility 0s linear var(--sb-d-slow)}
.sb-slide:not([hidden]){opacity:1;visibility:visible;transition:opacity var(--sb-d-slow) var(--sb-ease),visibility 0s}
.sb-slide,.sb-slide img{width:100%;height:100%;object-fit:cover}
.sb-gallery-dots{position:absolute;z-index:2;bottom:4px;left:4px;display:flex;background:color-mix(in srgb,var(--sb-bg) 60%,transparent);backdrop-filter:blur(4px);padding:0 4px;border-radius:var(--sb-r-md)}
.sb-gallery-dots button{background:none;border:0;width:32px;height:44px;display:grid;place-items:center}
.sb-gallery-dots span{width:8px;height:8px;border-radius:9px;background:#14161b80}
.sb-gallery-dots [aria-pressed=true] span{width:20px;background:var(--sb-yellow)}
/* Pause / play, drawn from two spans so it needs no extra icon in the map. */
.sb-gallery-pause{position:absolute;z-index:2;right:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--sb-r-md);background:color-mix(in srgb,var(--sb-bg) 80%,transparent);color:var(--sb-ink);transition:background-color var(--sb-d-fast) var(--sb-ease)}
.sb-gallery-pause:hover{background:var(--sb-bg)}
.sb-gallery-pause-icon{display:block;width:14px;height:16px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.sb-gallery-pause[aria-pressed=true] .sb-gallery-pause-icon{width:0;height:0;border:8px solid transparent;border-left:13px solid currentColor;border-right:0}
@media(prefers-reduced-motion:reduce){
.sb-gallery-pause{display:none}
}
@media(max-width:767px){
.sb-services{order:4}
/* SiloDoors uses `gap-4` below md, then `gap-5` from md upward. */
 .sb-service-grid,.sb-service-side{gap:16px}
.sb-service-grid{grid-template-columns:1fr}
.sb-service-feature{grid-column:auto;padding:24px}
.sb-service-side{grid-template-columns:1fr}
.sb-service-photo{min-height:140px}
}

/* size-compare */
/* size-compare — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* SizeCompareStrip.tsx: previous | this size | next, never three equal cards. */
.sb-compare-strip{display:grid;gap:16px;margin-top:32px;padding:0;list-style:none}
.sb-compare-card{display:flex;flex-direction:column;height:100%;padding:24px;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:#fff;box-shadow:var(--sb-sh-1);transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease),border-color var(--sb-d) var(--sb-ease)}
a.sb-compare-card:hover{transform:translateY(calc(-1 * var(--sb-hover-lift)));border-color:var(--sb-muted-2);box-shadow:var(--sb-sh-2)}
.sb-compare-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sb-compare-card h3{font-size:18px}
a.sb-compare-card:hover h3{color:var(--sb-primary)}
.sb-compare-card>span:last-child{margin-top:8px;font-size:14px;line-height:1.6;color:var(--sb-ink-2)}
.sb-compare-current{border:2px solid var(--sb-primary);background:var(--sb-primary-select);box-shadow:var(--sb-sh-2)}
@media(min-width:768px){
.sb-compare-strip{grid-template-columns:1fr 1.3fr 1fr;gap:20px}
.sb-compare-middle{grid-column-start:2}
}

/* size-recommender */
/* size-recommender — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-row-action{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-size:14px;font-weight:500;color:var(--sb-primary)}
@media(max-width:639px){
.sb-row-action span{display:none}
}
/* Section lead, on the same ramp as every other inner-page intro (mt-3, text-[15px]/1.5). */
.sb-p-size-recommender .sb-intro{max-width:65ch;margin-top:12px!important;font-size:15px;line-height:1.5}

/* sizes */
/* sizes — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-size-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sb-size-hint{display:inline-block;font-size:12px;border:1px solid var(--sb-line);border-radius:20px;background:var(--sb-bg);padding:4px 10px;margin:12px 0 0}
.sb-size-hint-hot{border-color:transparent;background:var(--sb-accent);color:var(--sb-on-accent)}
.sb-size-differential{display:inline-block;border-radius:99px;background:var(--sb-soft);padding:4px 10px;font-size:12px;font-weight:500;color:var(--sb-primary-deep)}
.sb-section-note{margin-top:24px!important}
@media(max-width:767px){
.sb-sizes{order:6}
.sb-size-hint{font-size:11px}
}

/* sizes-at-sede */
/* sizes-at-sede — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-size-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;width:100%}
/* Section lead, on the same ramp as every other inner-page intro (mt-3, text-[15px]/1.5). */
.sb-p-sizes-at-sede .sb-intro{max-width:65ch;margin-top:12px!important;font-size:15px;line-height:1.5}
/* SizesAtSede.tsx: `grid gap-4 sm:grid-cols-2 md:gap-5 lg:grid-cols-4`. The shared .sb-grid-four
   goes two-up on phones, where this grid is one-up. */
.sb-p-sizes-at-sede .sb-grid-four{grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.sb-p-sizes-at-sede .sb-grid-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px){.sb-p-sizes-at-sede .sb-grid-four{gap:20px}}
@media(min-width:1024px){.sb-p-sizes-at-sede .sb-grid-four{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* SizesAtSede.tsx card: `aspect-[16/10]` plate, body on `px-5 pb-5 pt-4`, title `text-lg
   leading-snug`. The shared size card is a 4:3 plate with even 24px padding. */
.sb-p-sizes-at-sede .sb-size-art{aspect-ratio:16/10}
.sb-p-sizes-at-sede .sb-card-body{padding:16px 20px 20px}
.sb-p-sizes-at-sede .sb-size-card h3{line-height:1.375}

/* social-feed */
/* social-feed — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- SocialFeed.tsx: the heading and the two profile cards ---- */
.sb-social-head{display:flex;flex-direction:column;gap:20px}
.sb-social-row{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
/* SocialFeed.tsx: `rounded-md`, not the --r-lg the .sb-card class in the markup gives it. */
.sb-social-row a{display:flex;align-items:center;gap:12px;min-height:56px;height:100%;padding:8px 16px 8px 10px;border-radius:var(--sb-r-md);transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease),border-color var(--sb-d) var(--sb-ease)}
.sb-social-row a:hover{transform:translateY(calc(-1 * var(--sb-hover-lift)));border-color:var(--sb-muted-2);box-shadow:var(--sb-sh-2)}
/* `bg-brand text-on-brand`: the badge is the yellow chip of the logo, not an ink square. */
.sb-social-badge{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:var(--sb-r-sm);background:var(--sb-yellow);color:var(--sb-on-brand)}
.sb-social-badge .sb-icon{width:18px;height:18px}
.sb-social-id{display:flex;flex-direction:column;min-width:0}
.sb-social-row strong{font-size:14px;font-weight:600;line-height:1.2}
.sb-social-row small{font-size:12px;color:var(--sb-muted)}

/* ---- SocialGrid.tsx: the snapshot of real posts ---- */
/* SocialFeed.tsx: `mt-3 max-w-[52ch]` on the intro, against the theme's own 16px / wider measure. */
/* `!important` because .sb-intro carries one: every per-section override in this theme does. */
.sb-social-head .sb-intro{margin-top:12px!important;max-width:52ch}
/* No gap: SocialGrid.tsx's buttons sit flush inside the p-1 shell. */
.sb-social-filter{display:inline-flex;margin-top:24px;padding:4px;border:1px solid var(--sb-line);border-radius:var(--sb-r-md);background:var(--sb-surface);box-shadow:var(--sb-sh-1)}
/* `text-[14px] font-medium text-ink-2 hover:bg-bg`: .sb-chip is a 15px bordered control elsewhere,
   the filter is a size down and takes its colour from the unselected branch of the recipe. */
.sb-social-filter .sb-chip{min-height:44px;border:0;background:none;font-size:14px;font-weight:500;color:var(--sb-ink-2)}
.sb-social-filter .sb-chip:not([aria-pressed="true"]):hover{background:var(--sb-bg)}
.sb-social-filter .sb-chip[aria-pressed="true"]{background:var(--sb-primary);color:#fff;font-weight:600;box-shadow:var(--sb-sh-1)}
/* Bento: the newest post is a 2x2 feature, the rest are squares. grid-auto-flow:dense keeps the
   rows full once the feature takes two columns. */
.sb-social-grid{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 0;padding:0;list-style:none}
/* `.sb-section ul` zeroes every list margin and outranks a lone class, so the grid lost its `mt-4`
   and sat flush against the filter. Margin only: raising the base rule's specificity would also
   outrank the breakpoint rules below, which are plain `.sb-social-grid`. */
.sb-section .sb-social-grid{margin-top:16px}
.sb-social-tile{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:var(--sb-surface);box-shadow:var(--sb-sh-1);transition:opacity var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease)}
.sb-social-tile:hover{box-shadow:var(--sb-sh-2)}
.sb-social-tile-feature{grid-column:span 2;grid-row:span 2}
/* A filtered-out tile fades instead of disappearing, so the grid never reflows. */
.sb-social-dim{opacity:.2}
.sb-social-tile>a{position:absolute;inset:0;display:block;color:#fff}
.sb-social-tile img{width:100%;height:100%;object-fit:cover;transition:transform var(--sb-d-slow) var(--sb-ease)}
.sb-social-tile a:hover img,.sb-social-tile a:focus-visible img{transform:scale(var(--sb-photo-zoom))}
.sb-social-network,.sb-social-reel{position:absolute;top:12px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:rgba(17,17,17,.7);color:#fff}
.sb-social-network{left:12px}
.sb-social-reel{right:12px}
.sb-social-network .sb-icon,.sb-social-reel .sb-icon{width:16px;height:16px}
.sb-social-caption{position:absolute;inset-inline:0;bottom:0;display:flex;flex-direction:column;gap:4px;padding:56px 16px 14px;background:linear-gradient(to top,rgba(17,17,17,.85),rgba(17,17,17,.45),transparent);font-size:13px;line-height:1.35;opacity:0;transform:translateY(8px);transition:opacity var(--sb-d) var(--sb-ease),transform var(--sb-d) var(--sb-ease)}
.sb-social-tile a:hover .sb-social-caption,.sb-social-tile a:focus-visible .sb-social-caption{opacity:1;transform:none}
/* The feature cell is big enough to carry its caption at rest. */
.sb-social-tile-feature .sb-social-caption{opacity:1;transform:none;font-size:15px}
/* SocialTile.tsx: `text-brand`. On the dark scrim the kraft --accent read as unlit text. */
.sb-social-more{font-size:13px;font-weight:600;color:var(--sb-yellow)}
.sb-social-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;font-size:13px;color:var(--sb-muted)}
.sb-social-foot p{margin:0}

/* The homepage <main> is a flex column and every section there carries a mobile `order`, so a
   section without one falls to the default 0 and lands next to the hero. SocialFeed.tsx has no
   `order-*` of its own either: it takes HowItWorks' order-2 and sits after it because it is later
   in the DOM. Same trick here with the theme's numbering (steps is 3), so phone order stays
   hero → zones → calculator → steps → social feed, as in the reference. */
@media(max-width:767px){
.sb-p-social-feed{order:3}
}
@media(min-width:768px){
.sb-social-head{flex-direction:row;align-items:flex-end;justify-content:space-between}
.sb-social-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1024px){
.sb-social-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* social-split */
/* social-split — copy on one side, a shortcode feed on the other. Loads only where the block is. */

/* One column on a phone, copy over feed. Two from 1024, copy a touch narrower than the grid so the
   photos get the room: the text is a 46ch column either way and the extra width is wasted on it.

   `-grid`, not `.sb-social-split`: that name is on the <section> itself (sb-section sb-<slug>), and
   while both carried it the grid ran twice — once on the section, whose only child is the wrapper,
   and again inside. */
.sb-social-split-grid{display:grid;gap:28px;align-items:start}
/* The homepage <main> is a flex column whose sections all carry a mobile `order`; a section without
   one falls to the default 0 and lands beside the hero.
   This block sits fourth on the homepage, in the slot the reference fills with its social band, so
   it takes that slot's number: 3, the same as `steps`, which puts it directly after it — ties are
   broken by DOM order and this block comes later. Any other page it appears on is not a flex
   column, so the number is inert there. */
@media(max-width:767px){
.sb-social-split{order:3}
}
@media(min-width:1024px){
.sb-social-split-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px}
/* Sticky copy: the feed is the taller column on a desktop, and the heading scrolling away from its
   own photos left the section headless for most of its height. */
.sb-social-split-copy{position:sticky;top:120px}
}
/* The copy column adds no type rules of its own. `.sb-eyebrow`, `h2`, `.sb-intro`, `.sb-chip-row`,
   `.sb-buttons` and `.sb-small` are the same elements, in the same order, with the same spacing as
   the closing section — so this column reads as part of the page rather than as a block that
   happens to sit on it. The only thing left here is the note's own margin, which `.sb-small` has
   nowhere else because every section that uses it sets its own. */
.sb-social-split-copy .sb-small{margin-top:20px;line-height:1.5}

/* ---- WPZOOM ---------------------------------------------------------------------------------
   Skin only. How many posts, how many columns, grid or full-width, and the padding between tiles
   are settings on the feed's own screen (Instagram Feed > Layout), and nothing here touches them:
   no grid-template-columns, no gap, no display on the header or the footer. Change the feed, the
   section follows.

   What this does own is the dressing — the border, radius, shadow, hover and scrim every other
   card on the site has. Deliberately not the `.sb-ig-feed` skin from home.css: that one was
   written for the old full-width band and sets the column count and the gap along with the
   dressing, which is exactly the half this block must not have. */
.sb-social-split-feed .zoom-instagram-widget__item-inner-wrap{
overflow:hidden;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:var(--sb-surface);
box-shadow:var(--sb-sh-1);
transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease)}
.sb-social-split-feed .zoom-instagram-widget__item:hover .zoom-instagram-widget__item-inner-wrap{
transform:translateY(calc(-1 * var(--sb-hover-lift)));box-shadow:var(--sb-sh-2)}
/* The plugin's own zoom is a hard-coded 1.07; the theme has one number for every photo on the site. */
.sb-social-split-feed .zoom-instagram-widget__item:hover img{transform:scale(var(--sb-photo-zoom))}
/* A flat 50% black wash over the photo, which is what the plugin fades in, reads as a disabled
   tile. Same bottom-up scrim as the other photo tiles, so the glyph has something to sit on and
   the photo keeps its top two thirds. */
.sb-social-split-feed .zoom-instagram-widget__overlay:after{
background:linear-gradient(to top,rgba(17,17,17,.82),rgba(17,17,17,.28) 55%,rgba(17,17,17,0))!important}
.sb-social-split-feed .zoom-instagram-widget__overlay:hover:after{opacity:1!important}

/* The profile line, when the feed is set to show it: a surface card like the rest of the site. */
.sb-social-split-feed .zoom-instagram-widget__header{
align-items:center;gap:16px;margin:0;padding:14px 18px;border:1px solid var(--sb-line);
border-radius:var(--sb-r-md);background:var(--sb-surface);box-shadow:var(--sb-sh-1)}
.sb-social-split-feed .zoom-instagram-widget__header-column-left img{width:56px;height:56px;border-radius:999px;object-fit:cover;display:block}
.sb-social-split-feed .zoom-instagram-widget__header-name{margin:0;font-size:15px;font-weight:600;line-height:1.25;color:var(--sb-ink)}
.sb-social-split-feed .zoom-instagram-widget__header-user{margin:2px 0 0;font-size:13px}
.sb-social-split-feed .zoom-instagram-widget__header-user a{color:var(--sb-muted);text-decoration:none;transition:color var(--sb-d) var(--sb-ease)}
.sb-social-split-feed .zoom-instagram-widget__header-user a:hover{color:var(--sb-ink)}
/* Two lines of bio. The account writes it with emoji and hard breaks, and the full text pushed the
   photos down by half a row. */
.sb-social-split-feed .zoom-instagram-widget__header-bio{
margin-top:6px;font-size:13px;line-height:1.45;color:var(--sb-muted);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* The "Ver en Instagram" button, when the feed is set to show it, on the theme's button recipe.
   Three classes deep on the plugin's side, which is what it takes to beat its own blue. */
.sb-social-split-feed .zoom-instagram .zoom-instagram-widget__footer .wpz-insta-view-on-insta-button{
display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 20px;
border:1px solid var(--sb-line);border-radius:var(--sb-r-md);background:var(--sb-surface);
box-shadow:var(--sb-sh-1);color:var(--sb-ink);font:600 15px/1.2 Inter,system-ui,sans-serif;
text-decoration:none;white-space:nowrap;
transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease),border-color var(--sb-d) var(--sb-ease)}
.sb-social-split-feed .zoom-instagram .zoom-instagram-widget__footer .wpz-insta-view-on-insta-button:hover{
transform:translateY(calc(-1 * var(--sb-hover-lift)));border-color:var(--sb-muted-2);box-shadow:var(--sb-sh-2);opacity:1}
/* The glyph is a white SVG baked into a background-image for the blue button, so on a light one it
   disappeared. brightness(0) paints any source black whatever its own colour is. */
.sb-social-split-feed .wpz-insta-view-on-insta-button .button-icon{width:18px;height:18px;flex-shrink:0;filter:brightness(0);opacity:.86}

/* ---- Feed Them Social ------------------------------------------------------------------------
   Skin only, same rule as the WPZOOM half above. Columns, tile size and spacing belong to the feed's
   own screen — it writes them as data-ftsi-columns / -tablet / -mobile on the wrapper and its
   fts-global.js sizes the tiles from there. Nothing here sets a width, a height or a column count.

   (An earlier version of this file did, because the plugin's stylesheet was not reaching the page
   and the tiles collapsed into a 1px column with nothing to lay them out. It loads now — enqueued
   from inside the shortcode, printed with the footer's late styles — so those overrides are gone.) */
.sb-social-split-feed .slicker-instagram-placeholder{
overflow:hidden;
border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background-color:var(--sb-surface);
box-shadow:var(--sb-sh-1);
transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease),background-size var(--sb-d) var(--sb-ease)}
.sb-social-split-feed .slicker-instagram-placeholder:hover{
transform:translateY(calc(-1 * var(--sb-hover-lift)));box-shadow:var(--sb-sh-2);
background-size:calc(var(--sb-photo-zoom) * 100%)}

/* Same bottom-up scrim as the other photo tiles on the site, so the glyph and the counts have
   something to sit on and the photo keeps its top two thirds. */
.sb-social-split-feed .slicker-instagram-placeholder::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to top,rgba(17,17,17,.82),rgba(17,17,17,.28) 55%,rgba(17,17,17,0));
opacity:0;transition:opacity var(--sb-d) var(--sb-ease)}
.sb-social-split-feed .slicker-instagram-placeholder:hover::after{opacity:1}

/* The plugin's hover glyph is a character in an icon font that never loads. A masked SVG draws the
   same mark with nothing to download. */
.sb-social-split-feed .fts-instagram-icon{
position:absolute;top:50%;left:50%;z-index:4;transform:translate(-50%,-50%) scale(.9);
width:34px!important;height:34px!important;line-height:0!important;font-size:0!important;
background:#fff;opacity:0;
transition:opacity var(--sb-d) var(--sb-ease),transform var(--sb-d) var(--sb-ease);
-webkit-mask:var(--sb-ig-glyph) center/contain no-repeat;mask:var(--sb-ig-glyph) center/contain no-repeat}
.sb-social-split-feed .slicker-instagram-placeholder:hover .fts-instagram-icon{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Date top-left, likes and comments bottom-left, both on the scrim. */
.sb-social-split-feed .slicker-date,
.sb-social-split-feed .fts-insta-likes-comments-grab-popup{
position:absolute;z-index:4;pointer-events:none;color:#fff;font:500 13px/1.2 Inter,system-ui,sans-serif;
opacity:0;transition:opacity var(--sb-d) var(--sb-ease)}
.sb-social-split-feed .slicker-date{top:12px;left:12px;font-size:12px}
.sb-social-split-feed .fts-insta-likes-comments-grab-popup{left:12px;right:12px;bottom:12px}
.sb-social-split-feed .slicker-instagram-placeholder:hover .slicker-date,
.sb-social-split-feed .slicker-instagram-placeholder:hover .fts-insta-likes-comments-grab-popup{opacity:1}
.sb-social-split-feed .slicker-heart-comments-wrap{display:flex;gap:14px;margin:0;padding:0;list-style:none}
.sb-social-split-feed .slicker-heart-comments-wrap li{display:inline-flex;align-items:center;gap:5px;color:#fff}
.sb-social-split-feed .slicker-instagram-image-likes::before,
.sb-social-split-feed .slicker-instagram-image-comments::before{
content:"";width:15px;height:15px;flex-shrink:0;background:#fff;
-webkit-mask:var(--sb-heart-glyph) center/contain no-repeat;mask:var(--sb-heart-glyph) center/contain no-repeat}
.sb-social-split-feed .slicker-instagram-image-comments::before{-webkit-mask-image:var(--sb-chat-glyph);mask-image:var(--sb-chat-glyph)}
/* The plugin draws its own comment bubble in that same icon font: empty, and it would sit next to
   the one above. */
.sb-social-split-feed .fts-comment-instagram{display:none}

/* The share tray is Font Awesome <i> tags and Font Awesome is part of the stylesheet that never
   loads — four invisible links stacked over the photo. Hidden rather than restyled. */
.sb-social-split-feed .fts-share-wrap,
.sb-social-split-feed .slicker-instaG-backg-link,
.sb-social-split-feed .fts-powered-by-text,
.sb-social-split-feed .fts-instagram-popup{display:none!important}

/* What the plugin prints when the feed has no access token, which is what this page showed for a
   while: readable, instead of a line of black text floating in the section. */
.sb-social-split-feed .fts-shortcode-content-no-feed{
grid-column:1/-1;padding:24px;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);
background:var(--sb-surface);color:var(--sb-muted);font-size:15px;text-align:center}

/* Phosphor Instagram, Heart and ChatCircle — the same three the theme's own sb_icon() map holds,
   as mask sources because these paint over a photo rather than inline in text. */
.sb-social-split-feed{
--sb-ig-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z'/%3E%3C/svg%3E");
--sb-heart-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M178,32c-20.65,0-38.73,8.88-50,23.89C116.73,40.88,98.65,32,78,32A62.07,62.07,0,0,0,16,94c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,220.66,240,164,240,94A62.07,62.07,0,0,0,178,32ZM128,206.8C109.74,196.16,32,147.69,32,94A46.06,46.06,0,0,1,78,48c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,147.61,146.24,196.15,128,206.8Z'/%3E%3C/svg%3E");
--sb-chat-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-6.54-.67L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Z'/%3E%3C/svg%3E")}

/* steps */
/* steps — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* HowItWorks.tsx: icon tiles on a hairline, 01/02/03 badges in the logo yellow. */
.sb-step-list{list-style:none;margin-top:40px!important;position:relative;padding:0;gap:24px}
.sb-step-list:before{content:"";position:absolute;height:1px;background:var(--sb-line);inset:40px 16% auto}
.sb-step-list li{display:flex;position:relative;gap:16px}
.sb-step-icon{display:flex;position:relative;width:80px;height:80px;flex-shrink:0;align-items:center;justify-content:center;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:var(--sb-surface);color:var(--sb-primary);box-shadow:var(--sb-sh-1)}
.sb-step-icon b{position:absolute;left:-10px;top:-10px;display:grid;place-items:center;min-width:32px;height:32px;padding-inline:8px;background:var(--sb-yellow);border:1px solid var(--sb-brand-deep);border-radius:99px;font-size:13px;font-weight:600;color:var(--sb-on-brand)}
.sb-step-copy{min-width:0}
.sb-step-link{transition:color var(--sb-d-fast) var(--sb-ease)}
.sb-step-link:hover{color:var(--sb-primary-deep)}
.sb-step-link>span{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size var(--sb-d-fast) var(--sb-ease)}
.sb-step-link:hover>span{background-size:100% 1px}
.sb-step-body{max-width:36ch;margin:4px 0 0;font-size:15px;color:var(--sb-muted)}
@media(min-width:768px){
.sb-step-list li{flex-direction:column;align-items:center;gap:0;text-align:center}
.sb-step-icon{margin-bottom:20px}
.sb-step-copy{display:flex;flex-direction:column;align-items:center}
.sb-step-body{margin-inline:auto}
}
@media(max-width:767px){
.sb-steps{order:3}
.sb-step-list{gap:32px}
.sb-step-list:before{display:none}
}

/* team */
/* team — TeamBlock.tsx: the soft band with the four facility plates (reference py-14 md:py-20). */
.sb-p-team{border-block:1px solid var(--sb-line);background:var(--sb-soft)}
.sb-p-team>.sb-wrap{padding-block:56px}
/* TeamBlock.tsx heading: text-3xl, full measure. */
.sb-p-team h2{max-width:none}
.sb-p-team .sb-intro{max-width:65ch;margin-top:20px!important;font-size:16px;line-height:1.625;color:var(--sb-ink-2)}
/* Scoped: `.sb-section ul{margin:0}` in home.css out-specifies the bare class and ate the mt-10. */
.sb-p-team .sb-team-plates{margin:40px 0 0}
.sb-team-plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0;list-style:none}
.sb-team-plates img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--sb-line);border-radius:var(--sb-r-md)}
@media(min-width:768px){
.sb-p-team>.sb-wrap{padding-block:80px}
.sb-team-plates{gap:16px}
}
@media(min-width:1024px){
.sb-team-plates{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* trust */
/* trust — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* TrustBar.tsx: py-14 md:py-16, 2-up left-aligned on mobile, 5-up centred from md. */
.sb-trust{background:var(--sb-bg-deep)}
/* The heading is sr-only (TrustBar.tsx), so it inherits body type rather than the section h2 size. */
.sb-trust h2.screen-reader-text{font-size:1rem;line-height:1.5}
/* text-[13px] on the stat labels carries the 1.5 leading, not the .sb-section 1.6. */
.sb-trust .sb-stats span{line-height:1.5}
.sb-trust p{max-width:70ch;margin:40px auto 0;text-align:center;font-size:14px;line-height:1.5}
@media(max-width:767px){
.sb-trust{order:9}
.sb-trust p{text-align:left;margin-inline:0}
}

/* trust-rail */
/* trust-rail — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-rail-note{display:flex;align-items:flex-start;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid var(--sb-line);font-size:15px;line-height:1.6;color:var(--sb-ink)!important}
@media(min-width:1024px){
.sb-trust-rail{top:24px}
}

/* use-cases */
/* use-cases — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- UseCases.tsx ------------------------------------------------------------------------ */
.sb-p-use-cases{border-block:1px solid var(--sb-line);background:#fff}
.sb-use-cases{display:flex;flex-direction:column;gap:20px}
.sb-use-cases h2{flex-shrink:0;font-size:clamp(1.4rem,1.25rem + .8vw,1.75rem);max-width:none}
@media(min-width:1024px){
.sb-use-cases{flex-direction:row;align-items:center;gap:40px}
}

/* zones */
/* zones — moved out of the base sheets, rule for rule. Loads only where the block is. */
.sb-zone-strip{display:flex;align-items:center;gap:32px;padding:24px 32px;background:white;border:1px solid var(--sb-line);border-radius:16px}
.sb-zone-title{display:flex;align-items:center;gap:12px;flex-shrink:0}
.sb-zone-strip h2{font-family:Inter,system-ui,sans-serif;font-size:20px;font-weight:600;line-height:28px;letter-spacing:normal;white-space:nowrap}
.sb-zone-links{display:flex;flex-wrap:wrap;gap:8px}
.sb-zones{padding-bottom:64px}
@media(max-width:1023px){
.sb-zone-strip{flex-direction:column;align-items:flex-start;gap:16px}
}
@media(max-width:767px){
.sb-zones{order:1;padding-top:0;padding-bottom:48px}
.sb-zone-strip{padding:20px}
.sb-zone-links{gap:8px}
}

/* zones-served */
/* zones-served — moved out of the base sheets, rule for rule. Loads only where the block is. */
/* ---- ZonesServed.tsx / CoverageProse.tsx ------------------------------------------------- */
/* Same tinted band as the hub's coverage prose, with white chips over it. */
.sb-p-zones-served{border-top:1px solid var(--sb-line);background:var(--sb-soft)}
.sb-zones-title{max-width:28ch;text-wrap:balance}
.sb-zone-links-row{display:flex;flex-wrap:wrap;gap:0 32px;margin-top:24px}
/* ZonesServed.tsx heading runs the full measure; the shared `.sb-section h2{max-width:20ch}` cap
   wrapped "Zonas que atiende: Sabana Norte" onto a second line. */
.sb-p-zones-served h2{max-width:none}
/* Zone chips are text-[14px] on the inherited 1.5 leading, not the .sb-section 1.6. */
.sb-p-zones-served .sb-chip-row li{line-height:1.5}