/* SUMAR Piezas — estilos base del frontend.
   Todo va bajo .spz-root / .spz-zona y usa solo los tokens de marca (--spz-*).
   Sin colores fijos. */

/* Grilla propia (solo huecos en modo "grilla") */
.spz-grilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;align-items:start}
.spz-col{min-width:0}
/* Todo lo que no es columna (p. ej. una grilla que quedó anidada al reconvertir) ocupa la fila entera. */
.spz-grilla>:not(.spz-col){grid-column:1/-1}
.spz-col-4{grid-column:span 4}
.spz-col-6{grid-column:span 6}
.spz-col-8{grid-column:span 8}
.spz-col-12{grid-column:span 12}
@media(max-width:900px){.spz-col-4{grid-column:span 6}.spz-col-8{grid-column:span 12}}
@media(max-width:600px){.spz-col-4,.spz-col-6,.spz-col-8{grid-column:span 12}}

/* Piezas nativas */
.spz-pieza.spz-imagen{margin:0;line-height:0}
.spz-pieza.spz-imagen img{display:block;width:100%;height:auto;max-width:100%;border-radius:var(--spz-radio)}
.spz-pieza.spz-imagen .spz-pie{line-height:1.4;font-size:.85em;margin-top:8px;color:var(--spz-texto);opacity:.75}

.spz-pieza.spz-texto{font-family:var(--spz-fuente);color:var(--spz-texto);line-height:1.5;margin:0}
.spz-texto-titulo-grande{font-size:2.6em;font-weight:800;line-height:1.05}
.spz-texto-titulo{font-size:1.8em;font-weight:800;line-height:1.15}
.spz-texto-subtitulo{font-size:1.25em;font-weight:700}
.spz-texto-cuerpo{font-size:1em}
.spz-texto-nota{font-size:.85em;opacity:.75;display:block}
.spz-alinear-izquierda{text-align:left}
.spz-alinear-centro{text-align:center}
.spz-alinear-derecha{text-align:right}
.spz-pieza.spz-texto ul,.spz-pieza.spz-texto ol{padding-left:1.4em;margin:.5em 0}

.spz-pieza.spz-boton{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:30px;font-family:var(--spz-fuente);font-weight:800;font-size:15px;text-decoration:none!important;border:2px solid var(--spz-primario);transition:transform .16s,background .18s,color .18s;cursor:pointer}
.spz-boton-primario{background:var(--spz-primario);color:var(--spz-secundario)!important}
.spz-boton-secundario{background:var(--spz-secundario);color:var(--spz-primario)!important;border-color:var(--spz-secundario)}
.spz-boton-contorno{background:transparent;color:var(--spz-texto)!important}
.spz-pieza.spz-boton:hover{transform:translateY(-2px)}

.spz-pieza.spz-html{min-width:0}

/* Cartel de zona despublicada (lo ven los visitantes) */
.spz-zona-oculta-cartel{font-family:var(--spz-fuente);color:var(--spz-texto);background:var(--spz-fondo);border:1px dashed var(--spz-primario);border-radius:var(--spz-radio);padding:28px 32px;text-align:center;font-size:1.05em}

/* Cinta para editores cuando la zona está despublicada */
.spz-cinta{font-family:var(--spz-fuente);background:var(--spz-primario);color:var(--spz-secundario);padding:8px 16px;font-size:13px;border-radius:var(--spz-radio);margin-bottom:12px}

/* Hueco libre y video */
.spz-libre{margin-top:34px;min-width:0}
.spz-pieza.spz-video{margin:0}
.spz-video-caja{position:relative;border-radius:var(--spz-radio);overflow:hidden;background:var(--spz-secundario)}
.spz-video-caja iframe,.spz-video-caja video{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0}
.spz-pieza.spz-video .spz-pie{font-size:.85em;margin-top:8px;color:var(--spz-texto);opacity:.75}

/* Contenedores (solo en huecos en modo grilla) */
.spz-pieza.spz-contenedor{min-width:0}
.spz-cont-relleno-chico{padding:16px}
.spz-cont-relleno-grande{padding:32px}
.spz-cont-redondeado{border-radius:var(--spz-radio)}
.spz-cont-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;align-items:start}
.spz-cont-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.spz-cont-col > *{min-width:0}
@media(max-width:700px){.spz-cont-col{grid-column:span 12}}

/* Tamaño y posición por pieza */
.spz-alto img,.spz-alto video,.spz-alto iframe{height:var(--spz-alto)!important;max-height:var(--spz-alto)!important;object-fit:cover;width:100%}
.spz-alto .spz-video-caja{aspect-ratio:auto}
.spz-alto.spz-contenedor{min-height:var(--spz-alto)}
.spz-alinear-pieza-centro{text-align:center}
.spz-alinear-pieza-derecha{text-align:right}
.spz-alinear-pieza-izquierda{text-align:left}
.spz-cont-col > .spz-alinear-pieza-centro{align-self:center}
.spz-cont-col > .spz-alinear-pieza-derecha{align-self:flex-end}
.spz-cont-col > .spz-alinear-pieza-izquierda{align-self:flex-start}

/* Popup genérico de piezas (se usa si la página no tiene modal propio) */
.spz-popup-contenido[hidden]{display:none!important}
.spz-popup-velo{display:none;position:fixed;inset:0;z-index:99980;background:color-mix(in srgb,var(--spz-secundario) 65%,transparent);backdrop-filter:blur(3px);padding:24px;overflow-y:auto}
.spz-popup-velo.spz-popup-abierto{display:flex;align-items:flex-start;justify-content:center}
html.spz-popup-sin-scroll{overflow:hidden}
.spz-popup-caja{position:relative;width:100%;max-width:760px;margin:auto;background:var(--spz-fondo);color:var(--spz-texto);border-radius:var(--spz-radio);overflow:hidden;box-shadow:var(--spz-sombra);font-family:var(--spz-fuente)}
.spz-popup-cerrar{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border:0;border-radius:10px;background:color-mix(in srgb,var(--spz-secundario) 60%,transparent);color:var(--spz-fondo);font-size:26px;line-height:1;cursor:pointer}
.spz-popup-img{display:block;width:100%;max-height:440px;object-fit:contain;background:color-mix(in srgb,var(--spz-texto) 6%,transparent)}
.spz-popup-cuerpo{padding:32px 40px 40px}
.spz-popup-fecha{font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--spz-primario)}
.spz-popup-titulo{margin:10px 0 0;font-size:30px;font-weight:800;line-height:1.12}
.spz-popup-texto{margin-top:20px;font-size:15.5px;line-height:1.7}
.spz-popup-texto p{margin:0 0 16px}
.spz-popup-texto img{max-width:100%;height:auto;border-radius:var(--spz-radio)}
@media(max-width:680px){.spz-popup-cuerpo{padding:24px}.spz-popup-titulo{font-size:24px}}
/* Galería de fotos */
.spz-pieza.spz-galeria{margin:0;box-sizing:border-box}
.spz-galeria-grilla{display:grid;gap:var(--spz-gal-gap,10px);grid-template-columns:repeat(var(--spz-gal-cols,3),minmax(0,1fr))}
.spz-galeria-item{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:var(--spz-radio);cursor:zoom-in;min-width:0}
.spz-galeria-item img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;display:block;transition:transform .25s;margin:0!important}
.spz-galeria-item:hover img{transform:scale(1.04)}
.spz-pieza.spz-galeria .spz-pie{font-size:.85em;margin-top:8px;opacity:.75}
/* Ancho: toda la fila (aunque el diseño la ponga en una fila de tarjetas) o de borde a borde. */
.spz-gal-ocupa-fila,.spz-gal-ocupa-pantalla{width:100%!important;max-width:100%;flex:0 0 100%!important;grid-column:1/-1!important;clear:both}
.spz-gal-ocupa-pantalla{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding:0}
:has(> .spz-gal-ocupa-fila),:has(> .spz-gal-ocupa-pantalla){flex-wrap:wrap}
html:has(.spz-gal-ocupa-pantalla),body:has(.spz-gal-ocupa-pantalla){overflow-x:clip}
.spz-col:has(.spz-gal-ocupa-fila),.spz-col:has(.spz-gal-ocupa-pantalla){grid-column:1/-1}
/* Mosaico: cada foto con su forma original, encajadas como ladrillos. */
.spz-galeria-grilla.spz-gal-mosaico{display:block;column-count:var(--spz-gal-cols,3);column-gap:var(--spz-gal-gap,10px)}
.spz-gal-mosaico .spz-galeria-item{aspect-ratio:auto;break-inside:avoid;margin-bottom:var(--spz-gal-gap,10px)}
.spz-gal-mosaico .spz-galeria-item img{height:auto!important}
/* Libre y destacada: filas de alto fijo; cada foto puede ocupar 2 columnas, 2 filas o las dos. */
.spz-galeria-grilla.spz-gal-libre{grid-auto-rows:var(--spz-gal-alto,220px);grid-auto-flow:row dense}
.spz-gal-libre .spz-galeria-item{aspect-ratio:auto;height:100%}
.spz-gal-t-ancha{grid-column:span 2}
.spz-gal-t-alta{grid-row:span 2}
.spz-gal-t-grande{grid-column:span 2;grid-row:span 2}
.spz-gal-libre .spz-gal-a-derecha{grid-column:-3/-1}
@media(max-width:700px){
.spz-galeria-grilla{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.spz-galeria-grilla.spz-gal-mosaico{column-count:2}
.spz-galeria-grilla.spz-gal-libre{grid-auto-rows:calc(var(--spz-gal-alto,220px) * .65)}
.spz-gal-libre .spz-gal-a-derecha{grid-column:span 2}
}
.spz-visor{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center}
.spz-visor.spz-popup-abierto{display:flex}
.spz-visor img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px}
.spz-visor button{all:unset;position:absolute;cursor:pointer;color:#fff;font-size:44px;line-height:1;padding:10px 16px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.spz-visor .spz-visor-cerrar{top:10px;right:14px}
.spz-visor .spz-visor-ant{left:8px;top:50%;transform:translateY(-50%)}
.spz-visor .spz-visor-sig{right:8px;top:50%;transform:translateY(-50%)}
.spz-visor.spz-visor-una .spz-visor-ant,.spz-visor.spz-visor-una .spz-visor-sig{display:none}