@font-face{font-family:Inter;src:url("../fonts/inter.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage.woff2") format("woff2");font-style:normal;font-weight:200 800;font-display:swap}
/* Tokens mirror storagebogota/app/globals.css. Legacy --sb-* names kept as aliases. */
:root{
--sb-bg:#f5f6f8;--sb-bg-deep:#14161b;--sb-surface:#fff;
--sb-ink:#14161b;--sb-ink-2:#333845;--sb-muted:#565d6b;--sb-muted-2:#5f6673;--sb-line:#e3e6ec;
--sb-yellow:#efe635;--sb-brand-deep:#d9cf22;--sb-on-brand:#14161b;
--sb-primary:#262324;--sb-primary-deep:#6b5434;--sb-soft:#fcfadb;--sb-primary-select:#faf7be;
--sb-accent:#866a41;--sb-accent-deep:#6b5434;--sb-accent-soft:#f2ece3;--sb-on-accent:#fff;
--sb-ring:#262324;--sb-whatsapp:#25d366;--sb-whatsapp-deep:#1ebe5b;
--sb-r-sm:8px;--sb-r-md:12px;--sb-r-lg:16px;--sb-r-xl:24px;--sb-radius:16px;
--sb-sh-1:0 1px 2px rgba(20,22,27,.06);--sb-sh-2:0 4px 16px rgba(20,22,27,.07);--sb-sh-3:0 12px 32px rgba(20,22,27,.1);
--sb-ease:cubic-bezier(.22,1,.36,1);--sb-d-fast:150ms;--sb-d:300ms;--sb-d-slow:450ms;
--sb-hover-lift:2px;--sb-hover-scale:1.02;--sb-photo-zoom:1.05}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body.home{background:var(--sb-bg);color:var(--sb-ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
/* Layered subtle noise (reference globals.css): fixed overlay, no repaints on scroll. */
body.home::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.sb-home{display:flex;flex-direction:column;outline:0}
.sb-home>.sb-section{margin:0;width:100%;max-width:none}
.sb-section{color:var(--sb-ink);font:400 16px/1.5 Inter,system-ui,sans-serif;--sb-local-muted:var(--sb-muted)}
.sb-section *{box-sizing:border-box}
.sb-section [hidden]{display:none!important}
.sb-section a{color:inherit;text-decoration:none}
.sb-section button,.sb-section input,.sb-section select,.sb-section textarea{font:inherit}
.sb-section button{cursor:pointer}
.sb-section h1,.sb-section h2,.sb-section h3,.sb-section p,.sb-section ul,.sb-section ol{margin:0}
.sb-section h1,.sb-section h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;letter-spacing:-.02em;color:inherit}
.sb-section h1{line-height:.95;letter-spacing:-.02em}
.sb-section h2{line-height:1.1}
.sb-section h2{font-size:clamp(1.75rem,1.4rem + 1.7vw,2.5rem);max-width:20ch}
.sb-section h3{font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);font-weight:600;line-height:1.15;letter-spacing:normal;color:inherit}
.sb-size-card h3{font-size:1.125rem;line-height:28px;letter-spacing:normal}
.sb-section p{color:var(--sb-local-muted)}
.sb-section img{display:block;max-width:100%;height:auto}
/* Local copy so visually-hidden headings never depend on core's wp-block-library being enqueued.
   Unscoped: the quote and newsletter honeypot inputs sit outside any .sb-section wrapper, and while
   the rule was scoped they rendered at full width and pushed the document past the viewport. */
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sb-section a:focus-visible,.sb-section button:focus-visible,.sb-section input:focus-visible,.sb-section select:focus-visible,.sb-section textarea:focus-visible,.sb-section summary:focus-visible{outline:2px solid var(--sb-ring);outline-offset:2px}
.sb-dark a:focus-visible,.sb-dark button:focus-visible,.sb-dark summary:focus-visible{outline-color:var(--sb-yellow)}
/* Reference container: `mx-auto max-w-site px-5 md:px-8 lg:px-10`, i.e. the 1280px cap INCLUDES the
   gutter, so the content box is 1200px at lg. Capping the content at 1280 instead made every section
   80px wider than the reference. */
.sb-wrap{width:min(100%,1280px);margin-inline:auto;padding-inline:40px}
.sb-pad{padding-block:96px}
.sb-pad-small{padding-block:48px}
/* Reference uses py-14 / md:py-20 / lg:py-24; this restores the missing 80px tablet step. */
@media(min-width:768px) and (max-width:1023px){.sb-pad{padding-block:80px}}
.sb-intro{margin-top:16px!important;max-width:55ch}
.sb-eyebrow{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-local-muted);margin-bottom:14px!important}
.sb-small{font-size:13px}
.sb-icon{display:inline-block;flex-shrink:0;vertical-align:middle}
.sb-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.sb-button{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:1px solid var(--sb-brand-deep);border-radius:var(--sb-r-md);background:var(--sb-yellow);color:var(--sb-on-brand)!important;font-size:15px;font-weight:500;line-height:1.5;box-shadow:var(--sb-sh-1);cursor:pointer;user-select:none;transition:all var(--sb-d-fast) var(--sb-ease)}
.sb-button .sb-icon{width:18px;height:18px;transition:transform var(--sb-d-fast) var(--sb-ease)}
.sb-button:hover{background:var(--sb-brand-deep);transform:translateY(calc(-1 * var(--sb-hover-lift)));box-shadow:var(--sb-sh-2)}
.sb-button:hover .sb-icon{transform:translateY(calc(-1 * var(--sb-hover-lift)))}
.sb-button:active{transform:scale(.98)}
.sb-button-outline{background:white;border-color:var(--sb-ink)}
.sb-button-outline:hover{background:#14161b;color:white!important}
/* The third button in the reference's row (`border-transparent hover:bg-bg hover:border-line`):
   a button's geometry with nothing drawn around it until the pointer arrives. "Llamar" on a sede
   page used to be a bare text link beside two real buttons — 69x48 against 128x48, no border, no
   padding — so the row read as two actions and an afterthought. It carries no lift and no shadow:
   the reference keeps this one flat so it stays the quietest of the three. */
.sb-button-ghost{background:transparent;border-color:transparent;box-shadow:none}
/* The panel stays put and the icon still steps up: that is the reference's hover for this variant,
   and for the outlined one beside it. Cancelling the icon's step too made the button the only one
   in the row that answered a pointer with nothing but a change of colour. */
.sb-button-ghost:hover{background:var(--sb-bg);border-color:var(--sb-line);box-shadow:none;transform:none}
.sb-text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:none;border:0;padding:0;font-size:14px;font-weight:500;color:inherit}
.sb-text-link>.sb-icon:first-child{order:2}
.sb-text-link .sb-icon{width:16px;height:16px}
/* Reference link idiom (`link-draw` in app/globals.css + ArrowRight `group-hover:translate-x-1`):
   a 1px underline drawn from the left, the colour deepening, and the arrow stepping 4px. Every
   text link in the theme shares it, so a block only sets its own colour and spacing. */
.sb-text-link>span,.sb-menu-block a span,.sb-crumbs a span,.sb-coverage-link span,.sb-featured-map-link span,
.sb-quote-calc-link span,.sb-sede-cell address a span,.sb-blog-more span,.sb-footer li a,.sb-footer-reference li a,
.sb-footer-reference li button,.sb-footer-reference-privacy a,.sb-step-link>span,.sb-segment-more-link>span,
.sb-price-link>span,.sb-location-all span,.sb-mega-more span,.sb-mega-col li a>span:first-child,
.sb-desktop-nav .sb-nav-link>span,.sb-article-next-links a>span{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size var(--sb-d-fast) var(--sb-ease)}
.sb-text-link:hover>span,.sb-menu-block a:hover span,.sb-crumbs a:hover span,.sb-coverage-link:hover span,
.sb-featured-map-link:hover span,.sb-quote-calc-link:hover span,.sb-sede-cell address a:hover span,
.sb-blog-card:hover .sb-blog-more span,.sb-footer li a:hover,.sb-footer-reference li a:hover,
.sb-footer-reference li button:hover,.sb-footer-reference-privacy a:hover,.sb-location-all:hover span,
.sb-mega-more:hover span,.sb-mega-col li a:hover>span:first-child,
.sb-mega-col li a:focus-visible>span:first-child,
/* The trigger, not only the <a>: hovering anywhere on the item opens its panel and turns the caret,
   so the underline has to answer the same gesture or the row half-reacts. */
.sb-desktop-nav .sb-nav-item:hover .sb-nav-link>span,
.sb-desktop-nav .sb-nav-item:focus-within .sb-nav-link>span,
.sb-desktop-nav .sb-nav-link:hover>span,.sb-desktop-nav .sb-nav-link:focus-visible>span,
.sb-article-next-links a:hover>span,.sb-article-next-links a:focus-visible>span{background-size:100% 1px}
.sb-text-link .sb-icon{transition:transform var(--sb-d-fast) var(--sb-ease)}
/* Every reference card and CTA presses in on `active:scale-[0.98]`; cards whose link is a child use
   `has-[a:active]` there, so the whole cell reacts to the press. The hover lift composes with it. */
.sb-button:active,.sb-size-card:active,.sb-segment-card:active,.sb-contact-card:active,.sb-intent-card:active,
.sb-review:active,.sb-service-door:active,.sb-sede-row:active,.sb-teaser-rows a:active,a.sb-compare-card:active,
.sb-social-row a:active,a.sb-blog-card:active,.sb-sede-cell:has(a:active),.sb-service-feature:has(a:active),
.sb-location-card:has(a:active){transform:translateY(calc(-1 * var(--sb-hover-lift))) scale(.98)}
.sb-text-link:hover{color:var(--sb-primary-deep)}
.sb-text-link:hover .sb-icon{transform:translateX(4px)}
.sb-chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--sb-line);border-radius:8px;padding:9px 16px;background:var(--sb-bg);font-size:14px;font-weight:500}
.sb-chip:hover{border-color:var(--sb-ink)}
.sb-card{padding:28px;border:1px solid var(--sb-line);border-radius:var(--sb-radius);background:#fff;box-shadow:0 1px 2px #14161b0f}
.sb-card p{margin-top:12px}
.sb-card h3{margin-top:20px}
.sb-card .sb-text-link{margin-top:16px}
/* Local variable scope, not a dark mode — mirrors .dark-cell in the reference globals.css.
   On dark, links and accents switch to the logo yellow (the logo's own pairing at 13:1). */
.sb-dark{
--sb-bg:#14161b;--sb-surface:#1b1e26;--sb-ink:#f5f6f8;--sb-ink-2:#c3c9d6;
--sb-muted:#9ba3b5;--sb-muted-2:#9ba3b5;--sb-local-muted:#9ba3b5;--sb-line:rgba(255,255,255,.12);
--sb-primary:#efe635;--sb-primary-deep:#f6f08f;--sb-primary-select:rgba(239,230,53,.22);
--sb-accent:#efe635;--sb-accent-deep:#d9cf22;--sb-on-accent:#14161b;--sb-ring:#efe635;
background:var(--sb-bg);color:var(--sb-ink)}
.sb-dark .sb-text-link{color:var(--sb-yellow)}
/* --sb-ink (#f5f6f8 inside .sb-dark), not pure white: the reference outlines this button with
   --ink, and the 10-unit difference read as an extra colour on every page that carries it. */
.sb-dark .sb-button-outline{background:transparent;color:var(--sb-ink)!important;border-color:var(--sb-ink)}
.sb-dark .sb-button-outline:hover{background:var(--sb-ink);color:#14161b!important}
.sb-grid{display:grid;gap:20px}
.sb-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sb-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.sb-grid-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.sb-cards{margin-top:40px}
.sb-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.sb-section-head>div{flex:1}
.sb-section-head>button{flex-shrink:0}
/* ---- carousel ----------------------------------------------------------------------------
   A row that holds more cards than fit. The track is the carousel: it snaps, swipes and takes
   the keyboard on its own, the way ScrollRow.tsx does in the reference. The arrows and dots are
   what this theme adds on top, and home.js unhides them only once the row actually overflows,
   so a short list keeps the plain row and no dead controls. */
/* Phone: everything centred, one arrow on each side of the dots. The right edge down there belongs
   to the WhatsApp bubble and the back-to-top button, and an arrow parked under them is unreachable. */
.sb-carousel-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}
.sb-carousel-controls[hidden]{display:none}
.sb-carousel-nav{display:contents}
.sb-carousel-nav[hidden]{display:none}
.sb-carousel-prev{order:1}
.sb-carousel-dots,.sb-carousel-count{order:2}
.sb-carousel-next{order:3}
/* Desktop: the dots stay centred under the row, and the arrows move beside the cards themselves,
   one at each end of the track (home.js moves the node into the frame at the same breakpoint). */
.sb-carousel-frame{position:relative}
@media(min-width:768px){
.sb-carousel-frame .sb-carousel-arrow{position:absolute;top:50%;z-index:2;transform:translateY(-50%)}
.sb-carousel-frame .sb-carousel-prev{left:-22px}
.sb-carousel-frame .sb-carousel-next{right:-22px}
.sb-carousel-frame .sb-carousel-arrow:hover:not([disabled]){transform:translateY(-50%) scale(1.06)}
.sb-carousel-frame .sb-carousel-arrow:active:not([disabled]){transform:translateY(-50%) scale(.98)}
}
/* The CTA's own hover: the logo yellow with near-black on it, lifted. */
.sb-carousel-arrow{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--sb-line);border-radius:999px;background:var(--sb-surface);color:var(--sb-ink);cursor:pointer;box-shadow:var(--sb-sh-1);transition:background var(--sb-d-fast) var(--sb-ease),border-color var(--sb-d-fast) var(--sb-ease),color var(--sb-d-fast) var(--sb-ease),transform var(--sb-d-fast) var(--sb-ease),box-shadow var(--sb-d-fast) var(--sb-ease),opacity var(--sb-d-fast) var(--sb-ease)}
.sb-carousel-arrow:hover:not([disabled]){background:var(--sb-yellow);border-color:var(--sb-brand-deep);color:var(--sb-on-brand);box-shadow:var(--sb-sh-2);transform:translateY(calc(-1 * var(--sb-hover-lift)))}
.sb-carousel-arrow:active:not([disabled]){transform:translateY(calc(-1 * var(--sb-hover-lift))) scale(.98)}
.sb-carousel-arrow[disabled]{opacity:.4;cursor:default;box-shadow:none}
.sb-carousel-arrow .sb-icon{width:18px;height:18px}
/* The dot is 8px, its button is a 44px tap target around it. */
.sb-carousel-dots{display:flex;flex-wrap:wrap;justify-content:center;grid-column:2}
.sb-carousel-dots[hidden]{display:none}
/* Past five screenfuls a row of dots stops being a map and becomes a smear, so it is a counter
   instead: one line that stays the same width whatever the number (tabular figures). */
.sb-carousel-count{grid-column:2;margin:0;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;line-height:1.4;color:var(--sb-muted);font-variant-numeric:tabular-nums}
.sb-carousel-count[hidden]{display:none}
.sb-carousel-dot{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.sb-carousel-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sb-muted-2);opacity:.4;transition:background var(--sb-d-fast) var(--sb-ease),opacity var(--sb-d-fast) var(--sb-ease),width var(--sb-d-fast) var(--sb-ease),height var(--sb-d-fast) var(--sb-ease)}
.sb-carousel-dot:hover::before{opacity:.7}
.sb-carousel-dot[aria-current]::before{width:10px;height:10px;background:var(--sb-primary);opacity:1}
/* Written over .sb-grid, so it has to come after it in this file. */
.sb-carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:8px;cursor:grab}
.sb-carousel-track>*{flex:0 0 auto;scroll-snap-align:start;width:85%}
/* While a pointer drag is running the snap and the smooth scroll both fight it. */
.sb-carousel-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
/* The dots say where you are and the arrows move you: a native scrollbar under them is a third
   control saying the same thing. Hidden only once JS has adopted the row, never before. */
.sb-carousel-ready [data-carousel-track]{scrollbar-width:none}
.sb-carousel-ready [data-carousel-track]::-webkit-scrollbar{display:none}
@media(min-width:768px){.sb-carousel-track>*{width:calc((100% - 40px) / 2.3)}}
@media(min-width:1024px){.sb-carousel-track>*{width:calc((100% - 60px) / 3.2)}}
.sb-badge{display:inline-block;border-radius:99px;background:var(--sb-yellow);padding:4px 12px;font-size:12px;font-weight:500;color:#14161b}
.sb-badge-kraft{background:#866a41;color:white;padding:1px 8px;font-size:11px;white-space:nowrap}
.sb-site-header{position:sticky;top:0;z-index:50;background:white;border-bottom:1px solid var(--sb-line);box-shadow:0 2px 14px #14161b05;transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease)}
.sb-site-header.sb-header-scrolled{box-shadow:var(--sb-sh-2)}
.sb-site-header.sb-header-lifted{transform:translateY(calc(-1 * var(--sb-utility-height,0px)))}
body.admin-bar .sb-site-header{top:32px}
.sb-utility .sb-icon{width:13px;height:13px}
.sb-nav-actions .sb-button{padding:10px 20px;font-size:14px}
/* Header.tsx hides CTA icons at lg so its compact desktop buttons remain 174px and 90px wide. */
@media(min-width:1024px){.sb-nav-actions .sb-button>.sb-icon{display:none}}
@media(min-width:1280px){
.sb-nav-actions .sb-button>.sb-icon{display:block}
}
/* header/MegaMenu.tsx: the trigger keeps its own href, the panel opens on hover and on focus.
   The panel is positioned against the header, so it spans the full width like the reference. */
.sb-site-header{position:sticky}
.sb-nav-item .sb-nav-link .sb-icon{width:12px;height:12px;margin-left:6px;transition:transform var(--sb-d-fast) var(--sb-ease)}
.sb-nav-item:hover .sb-nav-link .sb-icon,.sb-nav-item:focus-within .sb-nav-link .sb-icon{transform:rotate(180deg)}
/* Reference mega-menu labels, including “Sedes en Bogotá”, underline only the label. */
.sb-mega-col>.sb-eyebrow{display:inline-block;width:auto;margin-bottom:12px!important;padding-bottom:8px;border-bottom:1px solid var(--sb-line)}
.sb-mobile-group summary .sb-icon{width:16px;height:16px;flex-shrink:0;color:var(--sb-muted);transition:transform var(--sb-d) var(--sb-ease)}
.sb-mobile-group[open] summary .sb-icon{transform:rotate(90deg)}
.sb-hero-content>p:not(.sb-eyebrow){font-size:16px;line-height:1.625;max-width:52ch;margin-top:22px}
.sb-hero .sb-buttons{margin-top:32px}
.sb-iso-unit{stroke-opacity:.55}
.sb-iso-wall-left{fill:var(--sb-bg);stroke-width:1.25}
.sb-iso-wall-right{fill:var(--sb-surface);stroke-width:1.25}
.sb-iso-floor{fill:var(--sb-bg);stroke-width:1.25}
.sb-iso-item-left{fill:var(--sb-soft);stroke-width:1}
.sb-iso-item-right{fill:var(--sb-line);stroke-width:1}
.sb-iso-item-top{fill:var(--sb-surface);stroke-width:1}
.sb-intent-card[aria-pressed=true] .sb-iso-unit{stroke-opacity:.7}
.sb-intent-card[aria-pressed=true] .sb-iso-wall-right,.sb-intent-card[aria-pressed=true] .sb-iso-floor,.sb-intent-card[aria-pressed=true] .sb-iso-item-left{fill:var(--sb-soft)}
.sb-intent-card[aria-pressed=true] .sb-iso-item-right{fill:var(--sb-primary);fill-opacity:.55}
.sb-intent-card[aria-pressed=true] .sb-iso-item-top{fill:var(--sb-primary);fill-opacity:.85}
.sb-calculator .sb-text-link{margin-top:20px}
.sb-step-icon .sb-icon{width:36px;height:36px}
.sb-step-link,.sb-section .sb-step-verb{display:inline-flex;align-items:center;min-height:44px;gap:6px;margin:0;font-size:20px;font-weight:600;line-height:28px;letter-spacing:normal;color:var(--sb-ink)}
.sb-step-link .sb-icon{width:18px;height:18px;transition:transform var(--sb-d-fast) var(--sb-ease)}
.sb-step-link:hover .sb-icon{transform:translateX(4px)}
.sb-zone-title>.sb-icon{width:22px;height:22px;color:var(--sb-primary)}
.sb-zone-links>.sb-text-link{padding-inline:16px;border-radius:2px;color:var(--sb-primary)}
.sb-services> .sb-wrap>h2{max-width:22ch}
.sb-service-feature>.sb-text-link{min-height:41px;padding-top:20px;line-height:21px}
.sb-card-top .sb-icon{width:26px;height:26px;transition:transform var(--sb-d) var(--sb-ease)}
.sb-service-feature:hover .sb-card-top .sb-icon{transform:translateY(-6px)}
.sb-service-feature:hover>.sb-text-link{color:var(--sb-primary-deep)}
.sb-service-feature:hover>.sb-text-link .sb-icon{transform:translateX(4px)}
.sb-service-side .sb-card{display:flex;flex-direction:column;padding:24px;cursor:pointer;color:inherit;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-service-side .sb-card:hover{transform:translateY(calc(-1 * var(--sb-hover-lift)));border-color:var(--sb-muted-2);box-shadow:var(--sb-sh-2)}
.sb-service-door:hover .sb-text-link{color:var(--sb-primary-deep)}
.sb-service-door .sb-text-link .sb-icon{transition:transform var(--sb-d-fast) var(--sb-ease)}
.sb-service-door:hover .sb-text-link .sb-icon{transform:translateX(4px)}
.sb-service-side .sb-card:active{transform:scale(.98)}
.sb-service-side .sb-card>.sb-icon{width:24px;height:24px;color:var(--sb-primary);transition:transform var(--sb-d) var(--sb-ease)}
.sb-service-side .sb-card:hover>.sb-icon{transform:translateY(-6px)}
.sb-service-side .sb-card h3{margin-top:20px}
.sb-service-side .sb-card p{margin-top:8px;font-size:15px;color:var(--sb-ink-2)}
.sb-service-side .sb-text-link{min-height:41px;margin-top:auto;padding-top:20px;line-height:21px}
/* sm only: featured spans the row and the two side cells sit 2-up (sm:grid-cols-2). */
@media(min-width:640px) and (max-width:767px){.sb-service-grid .sb-service-side{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}}
/* Crossfade, not a hard swap (reference uses transition-opacity duration-slow).
   Inactive slides keep visibility:hidden so they stay out of the accessibility tree. */
.sb-section .sb-gallery .sb-slide[hidden]{display:block!important}
.sb-service-feature>.sb-text-link{margin-top:auto}
.sb-location-heading .sb-intro{max-width:52ch;margin-top:12px!important;font-size:15px}
.sb-sort-locations .sb-icon{width:16px;height:16px}
.sb-location-all .sb-icon{order:2;width:15px;height:15px;transition:transform var(--sb-d-fast) var(--sb-ease)}
.sb-location-all:hover .sb-icon{transform:translateX(4px)}
.sb-map-shell{position:relative;min-height:480px;border-radius:16px;overflow:hidden;background:#272a30;isolation:isolate}
.sb-sede-tiles{filter:grayscale(1) contrast(.9) brightness(.9)}
.sb-map-pin{display:block;width:100%;height:100%;border:2px solid var(--sb-bg-deep);border-radius:50%;background:var(--sb-yellow);box-shadow:0 0 0 4px rgba(239,230,53,.18);transition:transform var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease)}
.sb-map-pin-featured{border-width:3px;box-shadow:0 0 0 6px rgba(239,230,53,.25)}
.sb-map-pin-active{transform:scale(1.4);box-shadow:0 0 0 8px rgba(239,230,53,.28)}
.sb-sede-arc{stroke:var(--sb-yellow);stroke-opacity:.35;stroke-dasharray:4 6}
.leaflet-tooltip.sb-map-tag{padding:4px 10px;border:0;border-radius:999px;background:var(--sb-yellow);color:var(--sb-ink);font-size:12px;font-weight:500;text-align:center;box-shadow:var(--sb-sh-1)}
.leaflet-tooltip.sb-map-tag:before{display:none}
.leaflet-tooltip.sb-map-tag strong{display:block;font-weight:600}
.sb-location-map-link .sb-icon{width:18px;height:18px}
.sb-map-overview{min-height:44px;padding:0 12px;border:1px solid var(--sb-line);border-radius:var(--sb-r-sm);background:var(--sb-surface);color:var(--sb-ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.sb-size-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--sb-line);border-radius:16px;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-size-card:hover{transform:translateY(calc(-1 * var(--sb-hover-lift)));border-color:var(--sb-muted-2);box-shadow:var(--sb-sh-2)}
.sb-size-card:active{transform:scale(.98)}
.sb-size-art{aspect-ratio:4/3;overflow:hidden;display:flex;justify-content:center;align-items:flex-end;background:linear-gradient(135deg,var(--sb-soft),color-mix(in srgb,var(--sb-soft) 40%,var(--sb-surface)),var(--sb-surface))}
.sb-size-card:nth-child(3) .sb-size-art{background:linear-gradient(135deg,var(--sb-accent-soft),color-mix(in srgb,var(--sb-accent-soft) 40%,var(--sb-surface)),var(--sb-surface))}
.sb-size-art img{height:118%;width:auto;max-width:none;transform:translateY(8%);transition:transform var(--sb-d-slow) var(--sb-ease)}
.sb-size-card:hover img{transform:translateY(8%) scale(var(--sb-photo-zoom))}
.sb-card-body{padding:24px;display:flex;flex:1;flex-direction:column;align-items:flex-start}
.sb-card-body h3{font-size:18px}
/* `text-2xl`, which is the --t-2xl clamp in the reference's Tailwind config, not a flat 24px: the
   range is the widest line in the card and the clamp is what keeps "2-10 m³" on one line on a
   phone. Two stepped-down overrides at 767 and 380 used to approximate it. */
.sb-size-range{font-size:clamp(1.25rem,1.15rem + 0.5vw,1.5rem);font-weight:600;line-height:1.15;margin-top:4px}
.sb-size-card .sb-card-body p{font-size:14px;line-height:1.5;margin-top:8px;color:var(--sb-ink-2)}
.sb-size-card .sb-card-body>.sb-text-link{min-height:0;margin-top:auto;padding-top:16px;line-height:21px}
.sb-size-card .sb-card-body>.sb-text-link{color:var(--sb-primary)}
.sb-size-card:hover h3{color:var(--sb-primary)}
.sb-size-card:hover .sb-card-body>.sb-text-link{color:var(--sb-primary-deep)}
.sb-card-body .sb-badge{font-size:12px;margin-top:0}
.sb-sizes .sb-intro{max-width:52ch;margin-top:12px!important;font-size:15px;line-height:1.5}
.sb-contact .sb-intro{font-size:15px;max-width:48ch;margin-top:8px!important;color:var(--sb-ink-2)}
.sb-segments .sb-intro{font-size:15px;line-height:1.5}
.sb-segment-also{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px;row-gap:0;margin-top:24px!important;font-size:15px}
.sb-segment-also>span{color:var(--sb-muted)}
.sb-segment-more-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;border-radius:2px;font-weight:500;color:var(--sb-primary);transition:color var(--sb-d-fast) var(--sb-ease)}
.sb-segment-more-link>span{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size var(--sb-d-fast) var(--sb-ease)}
.sb-segment-more-link .sb-icon{width:15px;height:15px;transition:transform var(--sb-d-fast) var(--sb-ease)}
.sb-segment-more-link:hover{color:var(--sb-primary-deep)}
.sb-segment-more-link:hover>span{background-size:100% 1px}
.sb-segment-more-link:hover .sb-icon{transform:translateX(4px)}
.sb-segment-card h3 .sb-icon{width:26px;height:26px;flex-shrink:0;color:var(--sb-primary)}
.sb-segment-more .sb-icon{width:15px;height:15px;transition:transform var(--sb-d-fast) var(--sb-ease)}
.sb-segment-card:hover .sb-segment-more .sb-icon{transform:translateX(4px)}
/* lg+ segment-card layout lives in segments/style.css — see the note on the 1023px block below. */
.sb-trust>.sb-wrap{padding-block:56px}
.sb-stats{display:grid;grid-template-columns:repeat(5,1fr);column-gap:24px;row-gap:40px;text-align:center}
.sb-stats>div{display:flex;flex-direction:column;align-items:center}
.sb-stats strong{display:block;color:var(--sb-yellow);font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:2.5rem;line-height:1}
.sb-stats span{margin-top:12px;font-size:13px;color:var(--sb-local-muted)}
@media(min-width:768px){
.sb-trust>.sb-wrap{padding-block:64px}
}
.sb-stars .sb-icon{width:14px;height:14px}
.sb-reviews .sb-wrap>p{margin-top:12px}
.sb-reviews .sb-eyebrow{margin-bottom:12px;line-height:18px}
.sb-review-source .sb-icon{width:18px;height:18px}
.sb-review-hint .sb-icon{width:16px;height:16px}
@keyframes sb-marquee{to{transform:translateX(-50%)}}
.sb-faq-grid .sb-card{padding:32px;box-shadow:var(--sb-sh-3)}
.sb-faq-grid .sb-dark{border:0}
.sb-faq-grid .sb-dark>.sb-eyebrow{margin-top:0!important;margin-bottom:12px!important;line-height:18px}
.sb-faq-grid .sb-intro{margin-top:20px!important}
.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-grid .sb-dark>.sb-small{line-height:1.5}
.sb-faq-grid .sb-dark>.sb-text-link{margin-top:24px}
.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)}
/* ClosingBand.tsx: frosted --surface/40 panel over the scrimmed photo, py-20 md:py-28. */
.sb-closing>.sb-wrap{padding-block:80px}
@media(min-width:768px){
.sb-closing>.sb-wrap{padding-top:112px;padding-bottom:112px}
}
.sb-closing-panel .sb-intro{max-width:484.5px;margin:20px auto 0!important;line-height:1.5}
.sb-closing-panel .sb-buttons{width:max-content;margin:36px auto 0;justify-content:center}
.sb-closing-panel .sb-small{max-width:524.875px;margin:20px auto 0;font-size:14px;line-height:1.5}
.sb-closing-panel .sb-button{min-height:48.5px}
/* HomeBlog.tsx: py-14 md:py-20 (no lg step), mt-8 grid, 2-up at md and 3-up from lg. */
.sb-blog>.sb-wrap{padding-block:56px}
.sb-blog .sb-cards{margin-top:32px}
@media(min-width:768px){
.sb-blog>.sb-wrap{padding-top:80px;padding-bottom:77px}
.sb-blog .sb-grid-three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1024px){
.sb-blog .sb-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ArticleCard.tsx "grid" variant: the card never lifts. The hover lives in the cover zoom inside a
   frame that never grows, plus the border, the title and the underline. The whole card is one
   target: .sb-blog-more stretches over it, so the h3 keeps its heading semantics. */
.sb-blog .sb-grid{gap:16px}
.sb-blog-head>.sb-text-link{flex-shrink:0;color:var(--sb-primary)}
.sb-blog-card{position:relative;display:flex;flex-direction:column;background:var(--sb-surface);border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);overflow:hidden;box-shadow:var(--sb-sh-1);transition:border-color var(--sb-d) var(--sb-ease),box-shadow var(--sb-d) var(--sb-ease)}
.sb-blog-card:hover,.sb-blog-card:focus-visible{border-color:var(--sb-primary);box-shadow:var(--sb-sh-2)}
.sb-blog-card:active{transform:scale(.98)}
.sb-blog-photo{aspect-ratio:16/10;overflow:hidden}
.sb-blog-photo img{width:100%;height:100%;object-fit:cover;transition:transform var(--sb-d-slow) ease-in-out}
.sb-blog-card:hover .sb-blog-photo img{transform:scale(var(--sb-photo-zoom))}
.sb-blog-card .sb-card-body{padding:20px}
.sb-blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:13px!important;margin:0!important}
.sb-blog-meta .sb-badge{margin-top:0;padding:2px 10px;line-height:18px}
.sb-blog-card .sb-card-body h3{margin-top:12px;font:600 20px/28px "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;transition:color var(--sb-d-fast) var(--sb-ease)}
.sb-blog-card:hover .sb-card-body h3,.sb-blog-card:focus-visible .sb-card-body h3{color:var(--sb-primary-deep)}
.sb-blog-card p.sb-blog-excerpt{max-width:60ch;font-size:15px!important;line-height:1.625;margin-top:8px!important;color:var(--sb-ink-2)}
.sb-card-body>.sb-blog-more{margin-top:auto;padding-top:20px;color:var(--sb-primary)}
.sb-blog-more::after{content:"";position:absolute;inset:0}
.sb-blog-more .sb-icon{transition:transform var(--sb-d-fast) var(--sb-ease)}
.sb-blog-card:hover .sb-blog-more{color:var(--sb-primary-deep)}
.sb-blog-card:hover .sb-blog-more .sb-icon{transform:translateX(4px)}
@media(min-width:768px){
.sb-blog .sb-grid{gap:20px}
.sb-blog-card .sb-card-body{padding:24px}
}
.sb-footer-link{border:0;background:none;padding:0;font-size:13px;text-align:left}
.sb-footer>.sb-wrap{display:none}
.sb-footer-reference-address .sb-icon{width:18px;height:18px;flex:none;margin-top:1px}
.sb-footer-reference-detail>p .sb-icon{width:16px;height:16px}
.sb-whatsapp .sb-icon{width:32px;height:32px}
.sb-dialog{width:min(620px,calc(100vw - 32px));max-height:85dvh;overflow:auto;border:1px solid var(--sb-line);border-radius:20px;padding:40px;color:var(--sb-ink);background:white;box-shadow:0 20px 80px #0003}
.sb-dialog::backdrop{background:#14161b99;backdrop-filter:blur(4px)}
.sb-dialog h2{font-size:36px;margin:0 30px 18px 0;max-width:none}
.sb-dialog p{margin-block:16px}
.sb-dialog-close{position:absolute;right:14px;top:10px;width:44px;height:44px;border:0;background:transparent;font-size:30px!important;line-height:1}
.sb-dialog label{display:block;font-size:14px;font-weight:500;margin-top:18px}
/* Same field recipe as /cotizar/ — the reference keeps one definition in lib/controls.ts and
   never a copy per surface, so the dialogs use it too: 48px, rounded-xl, 2px line, 16px text. */
.sb-dialog input,.sb-dialog select,.sb-dialog textarea{display:block;width:100%;height:48px;padding:0 16px;border:2px solid var(--sb-line);border-radius:12px;background:var(--sb-bg);font-size:16px;color:var(--sb-ink);margin-top:6px}
.sb-dialog textarea{height:auto;padding:12px 16px}
.sb-newsletter,.sb-exit-offer{padding:0}
.sb-popup{width:min(440px,calc(100vw - 32px));border-radius:24px;padding:32px}
.sb-popup h2{font-size:24px;line-height:1.1;margin:0 36px 0 0}
.sb-popup .sb-popup-form>p{margin:8px 0 0;color:var(--sb-ink-2);font-size:15px}
.sb-popup .sb-newsletter-form{display:grid;gap:16px;margin-top:24px}
.sb-popup .sb-newsletter-form label{display:grid;gap:8px;margin:0;font-size:14px;font-weight:500;color:var(--sb-ink)}
.sb-popup .sb-newsletter-form input{height:48px;margin:0;padding:0 16px;border-radius:12px}
.sb-popup .sb-button{width:100%;margin-top:0}
.sb-popup .sb-newsletter-form .sb-small{margin:0;color:var(--sb-muted);font-size:13px;line-height:1.45}
.sb-popup .sb-dialog-close{right:12px;top:12px;border-radius:12px;font-size:0!important;transition:background-color var(--sb-d-fast) var(--sb-ease),color var(--sb-d-fast) var(--sb-ease)}
.sb-popup .sb-dialog-close::after{content:"×";font-size:26px;line-height:1;color:var(--sb-muted)}
.sb-popup .sb-dialog-close:hover{background:var(--sb-bg)}
.sb-popup .sb-newsletter-error{color:var(--sb-ink);font-size:14px;margin-top:14px}
/* An address already on the list is information, not a failure: the soft brand tint rather than the
   error line's plain ink, so it reads as a note beside a form the visitor can still use. */
.sb-popup .sb-newsletter-notice{display:flex;gap:8px;align-items:flex-start;margin-top:14px;padding:10px 12px;border-radius:var(--sb-r-sm);background:var(--sb-soft);color:var(--sb-ink);font-size:14px;line-height:1.5}
.sb-popup .sb-newsletter-notice::before{content:"";flex:0 0 auto;width:16px;height:16px;margin-top:2px;background:currentColor;-webkit-mask:var(--sb-info-mask) center/contain no-repeat;mask:var(--sb-info-mask) center/contain no-repeat}
:root{--sb-info-mask: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,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z'/%3E%3C/svg%3E")}
/* Same voice as the pop-up's notice: a quote that reached WhatsApp but not the database. */
.sb-form-error{color:var(--sb-ink);font-size:14px;margin-top:14px}
/* The finished state of a quote request. Same tinted card as the answers panel in the emails, so
   the confirmation on screen and the one in the inbox read as the same moment. */
.sb-quote-success{padding:28px;border:1px solid var(--sb-line);border-radius:var(--sb-r-lg);background:var(--sb-soft)}
.sb-quote-success h3{margin:0;font-size:22px;line-height:1.3;color:var(--sb-ink)}
.sb-quote-success p{margin:10px 0 0;max-width:52ch;font-size:15px;line-height:1.6;color:var(--sb-ink-2)}
.sb-quote-success .sb-button{margin-top:20px}
.sb-popup-privacy{color:var(--sb-primary);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.sb-popups-hint{padding:16px;border:1px dashed var(--sb-line);border-radius:12px;font-size:13px}
.sb-editor-section{max-width:none!important;border:1px solid #d5dbe4;margin-block:16px!important}
.sb-editor-section-label{padding:8px 16px;background:#e9edf2;color:#263142;font:600 12px/1.5 Inter,sans-serif}
.sb-editor-preview{pointer-events:none}
.sb-editor-preview .sb-whatsapp,.sb-editor-preview .sb-mobile-cta,.sb-editor-preview .sb-back-top{display:none}
.sb-editor-preview .sb-location-map{background:#30343c}
/* Responsive rules for block-owned classes (.sb-desktop-nav, .sb-location-grid, .sb-contact-card,
   .sb-zone-strip…) live in that block's style.css, not here: build/blocks.css is enqueued after
   this sheet, so a media query here loses to the block's own unqualified declaration. */
@media(max-width:1023px){
 .sb-wrap{padding-inline:32px}
 .sb-grid-four{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sb-review{flex-basis:calc((100% - 20px)/2)}
}
@media(max-width:767px){
html{scroll-padding-top:90px}
body.admin-bar .sb-site-header{top:46px}
.sb-wrap{padding-inline:20px}
.sb-pad{padding-block:56px}
.sb-pad-small{padding-block:40px}
.sb-nav-actions .sb-button{min-height:44px;padding:10px 14px;font-size:14px}
.sb-hero-content>p:not(.sb-eyebrow){font-size:15px}
.sb-hero .sb-buttons{flex-direction:column;width:100%}
.sb-grid-two,.sb-grid-three{grid-template-columns:1fr}
/* `gap-4 md:gap-5` on every one of these grids in the reference, so 16px below the md breakpoint
   and the sheet's own 20px above it. */
.sb-grid-four{gap:16px}
.sb-zone-links .sb-chip{padding-inline:16px;font-size:14px}
.sb-zone-links>.sb-text-link{display:inline-flex;align-items:center;min-height:44px;padding-inline:16px;border-radius:8px;font-size:14px}
.sb-card{padding:24px}
.sb-section-head{align-items:flex-start;flex-direction:column;gap:20px}
.sb-cards{margin-top:28px}
.sb-card-body{padding:18px}
.sb-card-body h3{font-size:17px;overflow-wrap:anywhere}
.sb-card-body p{font-size:13px}
/* The size card is one-up from here down, so it keeps the `p-6` and `text-lg` the reference gives
   it at every width instead of taking the two-up shrink above. */
.sb-size-card .sb-card-body{padding:24px}
.sb-size-card .sb-card-body h3{font-size:18px}
.sb-stats{grid-template-columns:repeat(2,1fr);column-gap:24px;row-gap:40px;text-align:start}
.sb-stats>div{align-items:flex-start}
.sb-stats>div:last-child{grid-column:1/-1}
.sb-stats strong{font-size:clamp(1.75rem,1.4rem + 1.7vw,2.5rem)}
.sb-faq-grid .sb-card{padding:28px}
.sb-closing-panel .sb-buttons{flex-direction:column}
.sb-dialog{padding:32px 22px}
.sb-dialog h2{font-size:30px}
}
/* The size-card grids — SizeStrip.tsx on the homepage, SizesAtSede.tsx on a sede page and
   AxisChooser's SizeCards on the pillars — are all `grid gap-4 sm:grid-cols-2 lg:grid-cols-4`:
   one card per row below Tailwind's `sm`, two from 640, four from 1024. The illustration and the
   m³ range do not halve on a phone, which is why the reference gives them the whole width.

   `.sb-cards.sb-grid-four`, not `.sb-grid-four`: the intent cards are the one grid on this class
   that the reference writes as a bare `grid-cols-2`, so they stay two-up all the way down. The
   doubled class also outranks the `repeat(2, …)` in the max-width:1023px block above, which a
   narrower breakpoint on its own would not. */
@media(max-width:639px){
.sb-cards.sb-grid-four{grid-template-columns:1fr}
}
/* The three size-card rules that used to sit here — a square plate, 14px of body padding and a
   20px range — were what a two-up card needed on a 360px phone. The grid is one-up below 640 now,
   as in the reference, and the card keeps its own plate and padding at every width. */
@media(max-width:380px){
.sb-nav-actions .sb-icon{display:none}
}
/* Page-block typography loads after this stylesheet. Keep the homepage hero's display
   scale isolated so the shared inner-page h1 rule cannot reduce the reference hero. */
.sb-home .sb-hero h1{font-size:clamp(44px,calc(28px + 3.5vw),68px);line-height:.95;letter-spacing:-.02em;max-width:19ch}
/* Final desktop rhythm calibration against the reference homepage. These only trim each
   band's trailing whitespace, preserving the component layout and all mobile spacing. */
@media(min-width:1024px){
 .sb-calculator .sb-pad{padding-bottom:93.6px}
 .sb-steps .sb-pad{padding-bottom:97px}
 .sb-services .sb-pad{padding-bottom:87px}
 .sb-locations .sb-pad{padding-bottom:91.8px}
 .sb-sizes{margin-top:1px!important}
 .sb-sizes .sb-pad{padding-bottom:93px}
 .sb-contact .sb-pad-small{padding-bottom:42px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.sb-section *{transition:none!important;animation:none!important}
}

/* ---- sb-p-instagram: the live WPZOOM feed, dressed as a section of this site ----------------
   inc/instagram.php frames the plugin's markup instead of rewriting it, so everything below is an
   override of plugin CSS. Two of its rules carry !important and one is printed inline next to the
   widget, after this sheet: `display:grid` and `gap` on the item list. The column count is not
   !important, so a selector one class deeper than the plugin's own is enough to win it.

   What the plugin gives us and we keep: the profile header (avatar, name, @handle, bio — live, so
   editing the Instagram bio updates the site), the hover glyph, the lightbox, and the footer link.
   What changes is the dressing: card, radii, scrim, and the button recipe this theme already uses. */
.sb-ig-head{max-width:62ch}
.sb-ig-head h2{margin:0}
.sb-ig-head .sb-intro{margin-top:12px!important}
.sb-ig-feed{margin-top:28px}
/* The plugin stacks header / grid / footer. On a wide viewport the profile and the link belong on
   one line above the grid, which is what the rest of the home does with its section heads.

   Flex, not grid: the item wrapper is a sibling of the header and the footer, and as a grid item
   spanning both columns its own width was what sized them — the profile column came out 0px wide
   and the link was pushed off to the right. Wrapping is the whole behaviour needed here. */
.sb-ig-feed .zoom-instagram{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
/* The grid sits between the header and the footer in the markup, and being 100% wide it wrapped
   the footer onto a third line. `order` puts the link beside the profile without touching the
   source order the plugin writes. */
.sb-ig-feed .zoom-instagram-widget__items-wrapper{order:3;flex:1 1 100%;min-width:0}
/* ---- The profile line, as a surface card ---- */
.sb-ig-feed .zoom-instagram-widget__header{order:1;flex:1 1 320px;min-width:0;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-ig-feed .zoom-instagram-widget__header-column-left img{width:56px;height:56px;border-radius:999px;object-fit:cover;display:block}
.sb-ig-feed .zoom-instagram-widget__header-column-right{min-width:0}
.sb-ig-feed .zoom-instagram-widget__header-name{margin:0;font-size:15px;font-weight:600;line-height:1.25;color:var(--sb-ink)}
.sb-ig-feed .zoom-instagram-widget__header-user{margin:2px 0 0;font-size:13px}
.sb-ig-feed .zoom-instagram-widget__header-user a{color:var(--sb-muted);text-decoration:none;transition:color var(--sb-d) var(--sb-ease)}
.sb-ig-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
   grid down by half a row. */
.sb-ig-feed .zoom-instagram-widget__header-bio{margin-top:6px;max-width:64ch;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 grid ---- */
/* One class deeper than `.zoom-instagram.feed-2769 .zoom-instagram-widget__items`, so these win
   without !important on the columns. The gap is !important over there, so it is here too. */
.sb-section .sb-ig-feed .zoom-instagram .zoom-instagram-widget__items{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important}
.sb-ig-feed .zoom-instagram-widget__item{float:none!important;margin:0!important}
.sb-ig-feed .zoom-instagram-widget__item-inner-wrap{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-ig-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-ig-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 social tiles, so the glyph has something to sit on and the
   photo keeps its top two thirds. */
.sb-ig-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-ig-feed .zoom-instagram-widget__overlay:hover:after{opacity:1!important}
/* ---- The footer link, on the theme's button recipe ---- */
.sb-ig-feed .zoom-instagram-widget__footer{order:2;flex:0 0 auto;justify-content:flex-start;margin:0}
/* Three classes deep on the plugin's side (`.zoom-instagram .…__footer .wpz-insta-…`), which was
   enough to keep the button a 3px-radius Instagram blue through a two-class override. */
.sb-ig-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-ig-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-ig-feed .wpz-insta-view-on-insta-button .button-icon{width:18px;height:18px;flex-shrink:0;filter:brightness(0);opacity:.86}

@media(min-width:768px){
.sb-section .sb-ig-feed .zoom-instagram .zoom-instagram-widget__items{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Profile left, link right, grid on the line below. */
.sb-ig-feed .zoom-instagram-widget__footer{justify-content:flex-end}
}
@media(min-width:1024px){
.sb-section .sb-ig-feed .zoom-instagram .zoom-instagram-widget__items{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---- per-block visibility (Visibilidad, in the block sidebar) ---------------------------------
   The class is attached at render by inc/block-visibility.php, never by save(), so a block's
   stored markup is unchanged and turning this on could not invalidate an existing page.
   768px is the breakpoint the rest of this sheet already turns on. */
@media(max-width:767px){
.sb-hide-mobile{display:none!important}
}
@media(min-width:768px){
.sb-hide-desktop{display:none!important}
}
/* A hidden band still holds its place in the DOM, so `:first-child` keeps pointing at it and the
   section that actually lands first inherits none of the spacing it was relying on. The homepage
   hero is the clearest case: it is the one band designed to sit flush under the header, and the
   zone selector under it carries `padding-top:0` for exactly that reason — hide the hero and that
   card lands on the header's own border.
   The shell is padded rather than the band, so whichever section ends up first gets the gap. */
@media(max-width:767px){
.sb-home:has(>.sb-section:first-child.sb-hide-mobile),
.sb-content:has(>.sb-section:first-child.sb-hide-mobile){padding-top:40px}
}
@media(min-width:768px){
.sb-home:has(>.sb-section:first-child.sb-hide-desktop),
.sb-content:has(>.sb-section:first-child.sb-hide-desktop){padding-top:48px}
}

/* The drawer is the page while it is open, so the document behind it must not scroll under a
   thumb that was aiming at a link. Set by assets/js/home.js alongside the panel itself. */
body.sb-menu-open{overflow:hidden}