/* Sea Of Glass And Mirrors · Version 0.5.23
   Visual Media Governance Contract
   Purpose: appearance themes may change decoration/composition, but never create
   irregular image dimensions, broken alignment, or unstable responsive media. */

:root{
  --sog-media-radius:14px;
  --sog-media-gap:clamp(14px,1.6vw,22px);
  --sog-gallery-ratio:4 / 3;
  --sog-card-ratio:16 / 10;
}

/* Standard galleries: immutable dimensional contract across all 8 designs. */
.gallery-grid,
body[data-sog-design] .gallery-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:var(--sog-media-gap) !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  width:100% !important;
  max-width:1240px !important;
  margin:clamp(24px,3vw,38px) auto 0 !important;
}
.gallery-grid > .gallery-item,
body[data-sog-design] .gallery-grid > .gallery-item{
  grid-column:auto !important;
  grid-row:auto !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  aspect-ratio:var(--sog-gallery-ratio) !important;
  align-self:stretch !important;
  overflow:hidden !important;
  border-radius:var(--sog-media-radius) !important;
  position:relative !important;
  background:color-mix(in srgb,var(--sog-theme-surface,#0a2036) 92%,#000) !important;
}
.gallery-grid > .gallery-item > img,
.gallery-grid > .gallery-item > picture,
.gallery-grid > .gallery-item > picture > img,
body[data-sog-design] .gallery-grid > .gallery-item img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:inherit !important;
}

/* A theme can decorate a gallery, but cannot distort its geometry. */
body[data-sog-design="design-2"] .gallery-grid,
body[data-sog-design="design-6"] .gallery-grid,
body[data-sog-design="design-8"] .gallery-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
body[data-sog-design="design-2"] .gallery-grid > .gallery-item,
body[data-sog-design="design-6"] .gallery-grid > .gallery-item,
body[data-sog-design="design-8"] .gallery-grid > .gallery-item{
  transform:none !important;
}
body[data-sog-design="design-2"] .gallery-grid > .gallery-item img{
  box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 22px color-mix(in srgb,var(--sog-accent) 12%,transparent) !important;
}

/* Reusable visual cards: all media in the same family gets the same frame. */
.blog-grid article img,
.category-grid .category-card img,
.partition-application-grid .partition-application-card img,
.services-grid .service-card img,
[class*="card-grid"] article img{
  width:100% !important;
  aspect-ratio:var(--sog-card-ratio) !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}

/* Preserve intentional special presentations (hero/runway/carousel), while keeping
   the currently active image inside a bounded frame. */
.runway-stage img,
.hero-carousel img,
[class*="carousel"] img{
  object-fit:cover;
  object-position:center;
}

/* Responsive invariants. */
@media (max-width:1050px){
  .gallery-grid,body[data-sog-design] .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:680px){
  .gallery-grid,body[data-sog-design] .gallery-grid{grid-template-columns:1fr !important;gap:14px !important}
  .gallery-grid > .gallery-item,body[data-sog-design] .gallery-grid > .gallery-item{aspect-ratio:4 / 3 !important}
}

/* Guard against theme selectors accidentally turning gallery children into masonry. */
body[data-sog-design] .gallery-grid > *{min-width:0 !important;max-width:100% !important}

/* Sea Of Glass And Mirrors — Visual Container Governance 0.5.23
   Architectural rule: content must never sit flush against a container edge.
   All themed presentation blocks receive breathable insets, softened corners,
   and media clipping that preserves polish across every appearance. */
body[data-sog-design] .series-item,
body[data-sog-design] .content-card,
body[data-sog-design] .service-card,
body[data-sog-design] .feature-card,
body[data-sog-design] .testimonial-card,
body[data-sog-design] .about-content,
body[data-sog-design] .official-article-card,
body[data-sog-design] .article-card,
body[data-sog-design] .blog-card,
body[data-sog-design] .contact-info,
body[data-sog-design] .glass-info-card,
body[data-sog-design] .info-card,
body[data-sog-design] .partition-application-card {
  box-sizing:border-box !important;
  border-radius:clamp(16px,1.5vw,24px) !important;
}

/* Featured product/service rows: generous breathing room, never edge-to-edge. */
body[data-sog-design] .series-item {
  padding:clamp(22px,2.2vw,34px) !important;
  gap:clamp(26px,3vw,48px) !important;
  overflow:hidden !important;
  border:1px solid color-mix(in srgb,var(--sog-theme-border) 50%,transparent) !important;
}
body[data-sog-design] .series-info {
  min-width:0 !important;
  padding:clamp(4px,.6vw,10px) clamp(4px,.8vw,14px) !important;
}
body[data-sog-design] .series-info h2 {
  margin-top:0 !important;
  line-height:1.28 !important;
}
body[data-sog-design] .series-info p,
body[data-sog-design] .series-info li {
  line-height:1.68 !important;
}
body[data-sog-design] .series-image {
  border-radius:clamp(14px,1.35vw,21px) !important;
  overflow:hidden !important;
  background-clip:padding-box !important;
}

/* Generic text containers receive a comfortable internal safe area. */
body[data-sog-design] .content-text,
body[data-sog-design] .editorial-copy-card,
body[data-sog-design] .about-content,
body[data-sog-design] .testimonial-card,
body[data-sog-design] .official-article-card,
body[data-sog-design] .article-card,
body[data-sog-design] .blog-card,
body[data-sog-design] .contact-info,
body[data-sog-design] .glass-info-card,
body[data-sog-design] .info-card {
  padding:clamp(22px,2.4vw,36px) !important;
}

/* Media inside cards is inset and softly contoured instead of touching frames. */
body[data-sog-design] :is(.content-card,.service-card,.feature-card,.official-article-card,.article-card,.blog-card,.partition-application-card) img,
body[data-sog-design] :is(.content-card,.service-card,.feature-card,.official-article-card,.article-card,.blog-card,.partition-application-card) video {
  max-width:100% !important;
  border-radius:clamp(12px,1.1vw,18px) !important;
}

/* Mobile keeps breathing room without wasting the small viewport. */
@media (max-width: 760px) {
  body[data-sog-design] .series-item {
    padding:18px !important;
    gap:20px !important;
    border-radius:18px !important;
  }
  body[data-sog-design] .content-text,
  body[data-sog-design] .editorial-copy-card,
  body[data-sog-design] .about-content,
  body[data-sog-design] .testimonial-card,
  body[data-sog-design] .official-article-card,
  body[data-sog-design] .article-card,
  body[data-sog-design] .blog-card,
  body[data-sog-design] .contact-info,
  body[data-sog-design] .glass-info-card,
  body[data-sog-design] .info-card {
    padding:20px !important;
  }
}

/* Sea Of Glass And Mirrors — Visual Breathing & Carousel Governance 0.5.23
   A theme may decorate a block, but it may never trap content against sharp edges
   or push carousel controls outside the active viewport. */
:root{
  --sog-panel-radius:clamp(20px,1.7vw,30px);
  --sog-panel-inset:clamp(22px,3vw,48px);
  --sog-panel-gap:clamp(22px,2.8vw,44px);
}

/* Structural panels get a safe inset and softened corners across every appearance. */
body[data-sog-design] main > section:not(.hero-carousel):not(.page-hero):not(.article-hero-local):not(.sog-location-modal__dialog){
  box-sizing:border-box !important;
  border-radius:var(--sog-panel-radius) !important;
  background-clip:padding-box !important;
}
body[data-sog-design] :is(.series-item,.content-card,.editorial-copy-card,.contact-info,.contact-card,.about-content,.testimonial-card,.feature-card,.service-card,.category-card,.partition-application-card,.article-card,.official-article-card,.blog-card,.glass-info-card,.info-card){
  box-sizing:border-box !important;
  border-radius:var(--sog-panel-radius) !important;
  padding:var(--sog-panel-inset) !important;
  overflow:hidden !important;
}
body[data-sog-design] :is(.series-item,.content-card,.editorial-copy-card,.contact-info,.about-content,.testimonial-card,.article-card,.official-article-card,.blog-card) > :first-child{margin-top:0 !important}
body[data-sog-design] :is(.series-item,.content-card,.editorial-copy-card,.contact-info,.about-content,.testimonial-card,.article-card,.official-article-card,.blog-card) > :last-child{margin-bottom:0 !important}
body[data-sog-design] .series-item{gap:var(--sog-panel-gap) !important}
body[data-sog-design] .series-image,
body[data-sog-design] :is(.series-item,.content-card,.service-card,.feature-card,.category-card,.partition-application-card) :is(img,video){
  border-radius:clamp(16px,1.35vw,24px) !important;
  overflow:hidden !important;
}

/* Carousel viewport contract: entire frame + floor + controls must fit in the active viewport. */
body[data-sog-carousel] .mirror-runway{
  width:min(1180px,calc(100% - clamp(20px,4vw,56px))) !important;
  max-width:1180px !important;
  height:clamp(350px,calc(100svh - 250px),560px) !important;
  min-height:0 !important;
  margin:clamp(18px,2.6vh,30px) auto clamp(28px,4vh,48px) !important;
  padding:clamp(16px,2.2vw,28px) !important;
  grid-template-rows:minmax(0,1fr) auto auto !important;
  border-radius:clamp(22px,2vw,32px) !important;
  overflow:hidden !important;
}
body[data-sog-carousel] .mirror-runway .runway-stage{min-height:0 !important;height:100% !important;overflow:hidden !important}
body[data-sog-carousel] .mirror-runway .runway-floor{height:clamp(18px,2.8vh,28px) !important;margin:0 auto !important}
body[data-sog-carousel] .mirror-runway .runway-controls{min-height:48px !important;margin-top:4px !important;padding-bottom:2px !important}
body[data-sog-carousel] .mirror-runway .runway-slide{max-height:100% !important}

/* 1 — Pasarela de Espejos (classic perspective) */
body[data-sog-carousel="runway"] .runway-slide{width:min(68%,760px) !important;height:92% !important}
body[data-sog-carousel="runway"] .runway-slide.prev{opacity:.35 !important;transform:translateX(-44%) rotateY(27deg) scale(.72) !important}
body[data-sog-carousel="runway"] .runway-slide.next{opacity:.35 !important;transform:translateX(44%) rotateY(-27deg) scale(.72) !important}

/* 2 — Escenario Panorámico: dominant central image, discreet wings. */
body[data-sog-carousel="showcase"] .mirror-runway{background:linear-gradient(145deg,color-mix(in srgb,var(--sog-theme-surface) 86%,#000),color-mix(in srgb,var(--sog-theme-bg) 94%,#000)) !important}
body[data-sog-carousel="showcase"] .runway-slide{width:min(76%,880px) !important;height:94% !important;border-radius:26px !important}
body[data-sog-carousel="showcase"] .runway-slide.prev{opacity:.22 !important;transform:translateX(-58%) scale(.62) !important;filter:brightness(.55) saturate(.7) !important}
body[data-sog-carousel="showcase"] .runway-slide.next{opacity:.22 !important;transform:translateX(58%) scale(.62) !important;filter:brightness(.55) saturate(.7) !important}

/* 3 — Tarjetas de Cristal: three flat aligned cards, active card emphasized. */
body[data-sog-carousel="cards"] .runway-stage{display:flex !important;align-items:center !important;justify-content:center !important;gap:clamp(12px,2vw,26px) !important;padding-inline:clamp(4px,1vw,12px) !important}
body[data-sog-carousel="cards"] .runway-slide{position:relative !important;inset:auto !important;display:none !important;width:29% !important;height:78% !important;opacity:.62 !important;transform:none !important;filter:brightness(.72) !important;border-radius:20px !important;flex:0 0 29% !important}
body[data-sog-carousel="cards"] .runway-slide.prev,body[data-sog-carousel="cards"] .runway-slide.active,body[data-sog-carousel="cards"] .runway-slide.next{display:block !important}
body[data-sog-carousel="cards"] .runway-slide.active{width:36% !important;height:92% !important;flex-basis:36% !important;opacity:1 !important;filter:none !important;box-shadow:0 22px 54px rgba(0,0,0,.46),0 0 26px color-mix(in srgb,var(--sog-accent) 20%,transparent) !important}

/* 4 — Coverflow Arquitectónico: stronger 3D depth. */
body[data-sog-carousel="coverflow"] .mirror-runway{perspective:1900px !important}
body[data-sog-carousel="coverflow"] .runway-slide{width:min(64%,720px) !important;height:88% !important;border-radius:22px !important}
body[data-sog-carousel="coverflow"] .runway-slide.prev{opacity:.48 !important;transform:translateX(-58%) rotateY(48deg) scale(.68) !important;transform-origin:right center !important}
body[data-sog-carousel="coverflow"] .runway-slide.next{opacity:.48 !important;transform:translateX(58%) rotateY(-48deg) scale(.68) !important;transform-origin:left center !important}

/* 5 — Minimal Cinemático: one image, almost invisible chrome. */
body[data-sog-carousel="minimal"] .mirror-runway{background:transparent !important;border-color:color-mix(in srgb,var(--sog-theme-border) 25%,transparent) !important;box-shadow:none !important}
body[data-sog-carousel="minimal"] .mirror-runway::before,body[data-sog-carousel="minimal"] .mirror-runway::after,body[data-sog-carousel="minimal"] .runway-floor{display:none !important}
body[data-sog-carousel="minimal"] .runway-slide{width:min(86%,980px) !important;height:96% !important;opacity:0 !important;transform:scale(.96) !important;border-radius:28px !important}
body[data-sog-carousel="minimal"] .runway-slide.active{opacity:1 !important;transform:scale(1) !important}
body[data-sog-carousel="minimal"] .runway-slide.prev,body[data-sog-carousel="minimal"] .runway-slide.next{opacity:0 !important}
body[data-sog-carousel="minimal"] .runway-controls{opacity:.72 !important}

@media(max-width:760px){
  body[data-sog-design] :is(.series-item,.content-card,.editorial-copy-card,.contact-info,.contact-card,.about-content,.testimonial-card,.feature-card,.service-card,.category-card,.partition-application-card,.article-card,.official-article-card,.blog-card,.glass-info-card,.info-card){padding:20px !important;border-radius:20px !important}
  body[data-sog-carousel] .mirror-runway{width:calc(100% - 20px) !important;height:clamp(330px,calc(100svh - 205px),500px) !important;padding:12px !important;border-radius:20px !important}
  body[data-sog-carousel="cards"] .runway-slide{display:none !important}
  body[data-sog-carousel="cards"] .runway-slide.active{display:block !important;width:88% !important;flex-basis:88% !important;height:94% !important}
}


/* Sea Of Glass And Mirrors — Wide Editorial Groups & Carousel Preview Contract 0.5.23
   Three-card editorial groups must use available screen width without suffocating
   the outer margins. Inner wrappers may never create a second narrow box. */
body[data-sog-design] .official-article-grid{
  width:100% !important;
  max-width:1480px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:none !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:clamp(26px,2.6vw,44px) !important;
  align-items:stretch !important;
}
body[data-sog-design] .official-article-card-local{
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  border-radius:clamp(22px,1.8vw,30px) !important;
}
body[data-sog-design] .official-article-card-local .category-info{
  width:100% !important;
  min-width:0 !important;
  padding:clamp(30px,3vw,48px) !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:inherit !important;
  box-shadow:none !important;
}
body[data-sog-design] .official-article-card-local h3{
  max-width:22ch !important;
}
body[data-sog-design] .official-article-card-local p{
  max-width:54ch !important;
}
@media(max-width:1180px){
  body[data-sog-design] .official-article-grid{
    width:100% !important;
    max-width:1040px !important;
    margin-inline:auto !important;
    transform:none !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:760px){
  body[data-sog-design] .official-article-grid{
    width:100% !important;
    max-width:100% !important;
    margin-inline:auto !important;
    transform:none !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  body[data-sog-design] .official-article-card-local .category-info{padding:24px !important}
}

/* SOG 0.5.23 — editor-controlled image/video replacement */
.sog-media-replacement-video,.sog-media-replacement-frame{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;border:0!important;border-radius:inherit!important;z-index:1!important;background:#020b14!important}

/* SOG-123 r28 — universal collection preset contract.
   No page-specific protected layouts: these are normal editor-controlled containers. */
.sog-gallery-runtime-shell{display:block;width:100%;max-width:100%;min-width:0}
.sog-gallery-status{min-height:1.25em;margin:.35rem 0 0;opacity:.78;font-size:.88rem}

/* SOG-123 r29 — universal collection card caption. Applies to any gallery page. */
.gallery-grid>.gallery-item{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;overflow:visible!important}
.gallery-grid>.gallery-item>img{flex:0 0 auto!important;width:100%!important;aspect-ratio:4/3!important;object-fit:cover!important;cursor:zoom-in!important}
.gallery-grid>.gallery-item>.gallery-caption{display:block!important;flex:0 0 auto!important;padding:10px 12px!important;line-height:1.25!important;text-align:center!important;font-weight:700!important;overflow-wrap:anywhere!important}

/* Universal collection presentation: same gallery data may be rendered as a carousel. */
.gallery-grid.sog-collection-carousel{display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;scroll-behavior:smooth!important;gap:16px!important;padding-bottom:8px!important;overscroll-behavior-inline:contain!important}
.gallery-grid.sog-collection-carousel>.gallery-item{flex:0 0 min(78vw,720px)!important;scroll-snap-align:center!important}
.sog-carousel-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px auto 0}.sog-carousel-controls>button{width:42px;height:42px;border-radius:50%;cursor:pointer}.sog-carousel-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}.sog-carousel-dots button{width:10px;height:10px;border:0;border-radius:50%;padding:0;opacity:.45;cursor:pointer}.sog-carousel-dots button.active{opacity:1;transform:scale(1.25)}
@media(max-width:700px){.gallery-grid.sog-collection-carousel>.gallery-item{flex-basis:88vw!important}}