@media (prefers-reduced-motion: no-preference) {
html.zaguan-js:not([data-zaguan-anim]) :is(
[class^="is-anim-"],
[class*=" is-anim-"],
[data-anim]
) {
opacity: 0; will-change: opacity, transform;
}
}.zgn-hero-collage__piezas {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
gap: 1rem;
}
.zaguan-js .zgn-hero-collage {
position: relative;
}
.zaguan-js .zgn-hero-collage__escena {
position: sticky;
top: 0;
block-size: 100svh;
overflow: hidden;
} .zaguan-js .zgn-hero-collage__portada {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
translate: -50% -50%;
overflow: hidden;
}
.zaguan-js .zgn-hero-collage__portada img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
} .zaguan-js .zgn-hero-collage__portada img {
animation: zgn-hero-kenburns 2.4s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}
@keyframes zgn-hero-kenburns {
from { scale: 1.22; }
to   { scale: 1; }
}
.zaguan-js .zgn-hero-collage__copy {
position: relative;
z-index: 2;
display: grid;
place-items: center;
block-size: 100%;
text-align: center;
pointer-events: none;
}
.zaguan-js .zgn-hero-collage__copy a,
.zaguan-js .zgn-hero-collage__copy button {
pointer-events: auto;
}
.zaguan-js .zgn-hero-collage__piezas {
display: block;
position: absolute;
inset: 0;
z-index: 1;
} .zaguan-js .zgn-hero-collage__piezas > * {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 0;
block-size: 0;
margin: 0;
opacity: 0;
overflow: hidden;
will-change: transform, opacity;
}
.zaguan-js .zgn-hero-collage__piezas img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
}.zgn-nav,
.zgn-nav-toggle {
--zgn-nav-fondo: var( --wp--preset--color--base, #fff );
--zgn-nav-tinta: var( --wp--preset--color--contrast, #111 );
--zgn-nav-linea: 2px;
--zgn-nav-icono: 28px;
--zgn-nav-z: 9000;
} .zgn-nav-toggle { position: fixed;
top: var( --zgn-nav-arriba, 1rem );
right: var( --zgn-nav-derecha, 1rem ); z-index: calc( var( --zgn-nav-z ) + 10 );
display: flex;
align-items: center;
justify-content: center;
width: var( --zgn-nav-icono );
height: var( --zgn-nav-icono );
padding: 0;
border: 0;
background: none;
color: var( --zgn-nav-tinta );
cursor: pointer; box-sizing: content-box;
padding: 0.5rem;
margin: -0.5rem;
}
.zgn-nav-toggle__caja {
position: relative;
display: block;
width: 100%;
height: var( --zgn-nav-icono );
}
.zgn-nav-toggle__caja > span {
position: absolute;
left: 0;
display: block;
width: 100%;
height: var( --zgn-nav-linea );
background: currentColor;
border-radius: var( --zgn-nav-linea ); transition: transform 0.28s ease, opacity 0.18s ease, top 0.28s ease;
} .zgn-nav-toggle__caja > span:nth-child( 1 ) { top: 25%; }
.zgn-nav-toggle__caja > span:nth-child( 2 ) { top: 50%; transform: translateY( -50% ); }
.zgn-nav-toggle__caja > span:nth-child( 3 ) { top: 75%; } .zgn-nav-toggle--cerrar {
display: none;
}
.zgn-nav-toggle--cerrar .zgn-nav-toggle__caja > span:nth-child( 1 ) {
top: 50%;
transform: translateY( -50% ) rotate( 45deg );
}
.zgn-nav-toggle--cerrar .zgn-nav-toggle__caja > span:nth-child( 2 ) {
opacity: 0;
}
.zgn-nav-toggle--cerrar .zgn-nav-toggle__caja > span:nth-child( 3 ) {
top: 50%;
transform: translateY( -50% ) rotate( -45deg );
} body:has( .zgn-nav:target ) .zgn-nav-toggle--abrir,
body.zgn-nav-abierto .zgn-nav-toggle--abrir {
display: none;
}
body:has( .zgn-nav:target ) .zgn-nav-toggle--cerrar,
body.zgn-nav-abierto .zgn-nav-toggle--cerrar {
display: flex;
}  .zgn-nav-toggle--unico > svg {
width: var( --zgn-nav-icono );
height: var( --zgn-nav-icono );
display: block;
} .zgn-nav-toggle--reserva {
display: none;
}
html.zgn-nav-js body:has( .zgn-nav:target ) .zgn-nav-toggle--reserva,
html.zgn-nav-js body.zgn-nav-abierto .zgn-nav-toggle--reserva {
display: none;
} .zgn-nav {
position: fixed;
inset: 0;
z-index: var( --zgn-nav-z );
display: flex;
align-items: center;
justify-content: center;
overflow-y: auto;
overscroll-behavior: contain;
background: var( --zgn-nav-fondo ); transform: translateX( var( --zgn-nav-desde, 100% ) );
visibility: hidden;
transition:
transform var( --zgn-nav-dur, 0.34s ) cubic-bezier( 0.22, 1, 0.36, 1 ),
visibility 0s linear var( --zgn-nav-dur, 0.34s );
}
.zgn-nav:target,
.zgn-nav.is-abierto {
transform: translateX( 0 );
visibility: visible;
transition:
transform var( --zgn-nav-dur, 0.34s ) cubic-bezier( 0.22, 1, 0.36, 1 ),
visibility 0s linear 0s;
}
.zgn-nav__panel {
display: flex;
flex-direction: column;
gap: var( --zgn-nav-hueco, 2rem );
width: 100%;
max-width: var( --wp--style--global--wide-size, 1200px );
padding: var( --zgn-nav-relleno, 4rem 1.5rem );
margin-inline: auto;
}
.zgn-nav__logo img {
max-width: var( --zgn-nav-logo-ancho, 160px );
height: auto;
} .zgn-nav__menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.zgn-nav__nivel {
display: flex;
flex-direction: column;
gap: var( --zgn-nav-hueco-item, 0.25em );
}
.zgn-nav__nivel--hijo {
padding-inline-start: var( --zgn-nav-sangria, 1.5rem );
}
.zgn-nav__enlace,
.zgn-nav__marca {
color: var( --zgn-nav-tinta );
text-decoration: none;
}
.zgn-nav__redes {
display: flex;
flex-wrap: wrap;
gap: var( --zgn-nav-hueco-red, 1rem );
list-style: none;
margin: 0;
padding: 0;
}
.zgn-nav__red-enlace {
display: inline-flex;
color: var( --zgn-nav-tinta );
} body.zgn-nav-abierto {
overflow: hidden;
}  .zgn-nav :focus-visible {
outline-offset: 2px;
}
@media ( prefers-reduced-motion: reduce ) {
.zgn-nav,
.zgn-nav-toggle__caja > span {
transition-duration: 0.01ms;
}
}  .zgn-nav__redes--texto {
flex-direction: column;
gap: var( --zgn-nav-hueco-red-texto, 0.4em );
}.zgn-faq summary {
cursor: pointer;
list-style: none;
}
.zgn-faq summary::-webkit-details-marker {
display: none;
} .zgn-faq details[ data-zgn-faq-anim ] > .zgn-faq__cuerpo {
overflow: hidden;
transition: height 0.3s ease;
}
@media ( prefers-reduced-motion: reduce ) {
.zgn-faq details[ data-zgn-faq-anim ] > .zgn-faq__cuerpo {
transition-duration: 0.01ms;
}
}*, *::before, *::after { box-sizing: border-box; }
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
:where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
:where(p) { text-wrap: pretty; } body .wp-site-blocks > *,
body .is-root-container > * { margin-block-start: 0; } body .wp-block-template-part { margin-block-start: 0; margin-block-end: 0; }.zgn-nav,
.zgn-nav-toggle {
--zgn-nav-fondo: var(--wp--preset--color--contrast);
--zgn-nav-tinta: var(--wp--preset--color--base);
--zgn-nav-icono: 26px; --zgn-nav-dur: 0.34s;
} @media (min-width: 992px) {
.zgn-nav,
.zgn-nav-toggle {
display: none;
}
}
@media (max-width: 991px) { .zgn-barra > .zgn-menu {
display: none;
}
}.wp-site-blocks > header:has( .zgn-cabecera ),
.zgn-cabecera {
position: fixed;
top: 0;
inset-inline: 0;
z-index: 100;
}  .zgn-barra .wp-block-site-title {
text-box: trim-both cap alphabetic;
} .zgn-barra .wp-block-site-title a {
display: block;
inline-size: clamp( 170px, 15vw, 230px );
aspect-ratio: 963.09 / 91.85;
translate: 0 16.5%;
overflow: hidden;
white-space: nowrap;
text-indent: 110%;
background-color: currentColor;
mask: url(//saioarellano.com/wp-content/themes/saioa/assets/img/logo-horizontal.svg) center / contain no-repeat;
} @media ( forced-colors: active ) {
.zgn-barra .wp-block-site-title a {
inline-size: auto;
aspect-ratio: auto;
text-indent: 0;
background: none;
mask: none;
}
}
.wp-block-group.zgn-cabecera { --zgn-cabecera-padding: var( --wp--preset--spacing--50 );
padding-block: var( --zgn-cabecera-padding );
background-color: transparent;
border-bottom: 1px solid transparent;
transition: padding .35s ease, background-color .35s ease, border-color .35s ease;
} .wp-block-group.zgn-cabecera.is-scrolled {
--zgn-cabecera-padding: var( --wp--preset--spacing--40 );
background-color: var( --wp--custom--chocolate-scrim );
backdrop-filter: blur( 8px );
border-bottom-color: var( --wp--preset--color--sai-blue );
} .wp-site-blocks > header:has( .zgn-cabecera ) + * {
margin-block-start: var( --zgn-cabecera-alto, 5.5rem );
}
body.page-template-page-landing .wp-site-blocks > header:has( .zgn-cabecera ) + * {
margin-block-start: 0;
} body.error404 .wp-site-blocks > header:has( .zgn-cabecera ) + * {
margin-block-start: 0;
} .is-root-container .zgn-cabecera {
position: static;
} .zgn-nav-toggle { --zgn-nav-icono: 32px; position: absolute;
inset-block-start: 50%;
inset-inline-end: var( --wp--style--root--padding-right );
transform: translateY( -50% );
} body.zgn-nav-abierto .zgn-cabecera {
z-index: 9020;
}
body.zgn-nav-abierto .zgn-barra > :not( .zgn-nav-toggle ) {
visibility: hidden;
}  .zgn-nav__logo { --zgn-nav-logo-ancho: 320px;
}
.zgn-nav__logo-img {
inline-size: clamp( 220px, 66vw, 320px );
block-size: auto;
} .zgn-nav__enlace {
font-size: clamp( 28px, 8vw, 40px );
line-height: 1.15;
}
.zgn-nav__nivel {
gap: var( --wp--preset--spacing--20 );
} .zgn-nav__contacto {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var( --wp--preset--spacing--20 );
font-size: var( --wp--preset--font-size--sai-sm );
} .zgn-nav__contacto,
.zgn-nav__contacto a {
color: var( --wp--preset--color--sai-arena );
}
.zgn-nav__contacto a {
text-decoration: none;
opacity: .7;
transition: opacity .25s ease;
}
.zgn-nav__contacto a:hover,
.zgn-nav__contacto a:focus-visible {
opacity: 1;
} .zgn-menu .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item::before {
content: "";
display: inline-block;
inline-size: 14px;
block-size: 1px;
margin-inline-end: var( --wp--preset--spacing--30 );
vertical-align: middle;
background-color: var( --wp--preset--color--sai-blue );
} :is( .zgn-cabecera, .zgn-pie, .has-sai-chocolate-background-color ) a:where( :not( .wp-element-button ) ) {
color: currentColor;
text-decoration-color: var( --wp--custom--arena-veil );
text-underline-offset: 0.25em;
}
:is( .zgn-cabecera, .zgn-pie ) a:where( :not( .wp-element-button ) ) {
text-decoration: none;
}
:is( .zgn-cabecera, .zgn-pie, .has-sai-chocolate-background-color ) a:where( :not( .wp-element-button ) ):hover {
color: var( --wp--preset--color--sai-blue );
} :is( .entry-content, .is-root-container ) .zgn-editorial {
font-family: var( --wp--preset--font-family--sai-serif );
font-style: italic;
font-weight: 300;
}  .zgn-faq {
--zgn-faq-num: 1.75rem;
}
.zgn-faq .zgn-faq__item {
border-block-start: 1px solid color-mix( in srgb, var( --wp--preset--color--sai-chocolate ) 15%, transparent );
}
.zgn-faq__num {
inline-size: var( --zgn-faq-num );
} .zgn-faq__item > summary {
cursor: pointer;
font-weight: 700;
letter-spacing: 0.04em;
padding-block: calc( var( --wp--preset--spacing--30 ) + 0.33em )
calc( var( --wp--preset--spacing--30 ) - 0.33em );
} .zgn-faq__cuerpo {
padding-inline-start: calc( var( --zgn-faq-num ) + var( --wp--preset--spacing--30 ) );
padding-block-end: var( --wp--preset--spacing--30 );
font-size: var( --wp--preset--font-size--sai-xs );
color: color-mix( in srgb, currentColor 65%, transparent );
} .zgn-rejilla-trabajos .zgn-trabajo figure {
margin-block-end: 0;
}  .zgn-faq__item > summary {
display: flex;
align-items: center; gap: 0;
}
.zgn-faq__num {
margin-inline-end: var( --wp--preset--spacing--30 );
}
.zgn-faq__item > summary::after {
content: "+";
margin-inline-start: auto;
font-weight: 400;
color: var( --wp--preset--color--sai-blue );
transition: transform .25s ease;
}
.zgn-faq__item[ open ] > summary::after {
content: "\2212";
transform: rotate( 180deg );
} .zgn-trabajo figure {
overflow: hidden;
}
@media ( hover: hover ) and ( pointer: fine ) and ( prefers-reduced-motion: no-preference ) { .zgn-trabajo img,
.zgn-quien-soy__retrato img,
.zgn-pasos__foto img {
transition: transform 1.2s cubic-bezier( 0.16, 1, 0.3, 1 );
}
.zgn-trabajo figure:hover img,
.zgn-quien-soy__retrato:hover img,
.zgn-pasos__foto:hover img {
transform: scale( 1.45 );
cursor: zoom-in;
}
} .zgn-trabajos .wp-block-button.is-style-outline > .wp-element-button:hover,
.zgn-trabajos .wp-block-button.is-style-outline > .wp-element-button:focus-visible {
background-color: var( --wp--preset--color--sai-blue );
border-color: var( --wp--preset--color--sai-blue );
color: var( --wp--preset--color--sai-chocolate );
}
.zgn-contacto .wp-block-button.is-style-outline > .wp-element-button:hover,
.zgn-contacto .wp-block-button.is-style-outline > .wp-element-button:focus-visible {
background-color: var( --wp--preset--color--sai-arena );
border-color: var( --wp--preset--color--sai-arena );
color: var( --wp--preset--color--sai-chocolate );
}
.wp-element-button {
transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}  :is( .entry-content, .is-root-container ) .zgn-trabajos .wp-block-heading em {
font-family: var( --wp--preset--font-family--sai-serif );
font-style: italic;
font-weight: 300;
letter-spacing: 0;
text-transform: none;
color: var( --wp--preset--color--sai-blue );
} :is( .entry-content, .is-root-container ) .zgn-enlace-subrayado a {
text-decoration: none;
border-block-end: 3px solid var( --wp--preset--color--sai-blue );
padding-block-end: 4px;
} .zgn-faq-seccion .zgn-faq__item {
border-block-start-color: color-mix( in srgb, currentColor 15%, transparent );
}
.zgn-faq-seccion .zgn-faq__item:last-child {
border-block-end: 1px solid color-mix( in srgb, currentColor 15%, transparent );
}
.zgn-faq-seccion .zgn-faq__item > summary::after {
color: currentColor;
} :is( .entry-content, .is-root-container ) > .alignfull {
margin-block-start: 0;
} .zgn-contacto__logo img {
inline-size: clamp( 170px, 20vw, 260px );
block-size: auto;
display: block;
}
.zgn-contacto__firma {
inline-size: 100%;
}
.zgn-contacto__datos {
margin-inline-start: auto;
} .zgn-quien-soy__retrato { max-inline-size: min( 100%, 620px ); overflow: clip;
}
.zgn-quien-soy__retrato img {
max-inline-size: 100%;
} @supports ( animation-timeline: view() ) {
@media ( prefers-reduced-motion: no-preference ) {
.zgn-quien-soy__retrato {
animation: zgn-retrato-abre linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
.zgn-quien-soy__retrato img {
animation: zgn-retrato-asienta linear both;
animation-timeline: view();
animation-range: entry 0% cover 50%;
}
}
}
@keyframes zgn-retrato-abre {
from {
clip-path: inset( 100% 0 0 0 );
}
to {
clip-path: inset( 0 0 0 0 );
}
}
@keyframes zgn-retrato-asienta {
from {
scale: 1.3;
translate: 0 12%;
}
to {
scale: 1;
translate: 0 0;
}
}
.zgn-quien-soy__texto {
max-inline-size: 520px;
} @media ( max-width: 781px ) {
.zgn-quien-soy .wp-block-columns.wp-block-columns {
row-gap: var( --wp--preset--spacing--70 );
}
} @media ( min-width: 782px ) { .zgn-quien-soy .wp-block-column {
container-type: inline-size;
}
.zgn-quien-soy h2 {
white-space: nowrap;
font-size: min( 13.5cqi, 92px ) !important;
}
}  .zgn-rejilla-trabajos {
display: grid; grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
gap: var( --wp--preset--spacing--60 );
align-items: start;
} .zgn-rejilla-trabajos > .zgn-trabajo {
min-inline-size: 0;
inline-size: fit-content;
max-inline-size: 100%;
} .zgn-trabajos > .wp-block-heading {
max-inline-size: 22em;
}
.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( 7n + 1 ) { grid-column: 1 / span 7; }
.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( 7n + 2 ) { grid-column: 9 / span 4; margin-block-start: clamp( 48px, 14vh, 200px ); }
.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( 7n + 3 ) { grid-column: 3 / span 10; margin-block-start: clamp( 56px, 10vh, 150px ); }
.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( 7n + 4 ) { grid-column: 1 / span 4; margin-block-start: clamp( 56px, 10vh, 150px ); }
.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( 7n + 5 ) { grid-column: 6 / span 6; margin-block-start: clamp( 96px, 20vh, 280px ); }
.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( 7n + 6 ) { grid-column: 2 / span 5; margin-block-start: clamp( 56px, 10vh, 150px ); }
.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( 7n + 7 ) { grid-column: 8 / span 5; margin-block-start: clamp( 24px, 4vh, 64px ); } @media ( max-width: 781px ) {
.zgn-trabajos .zgn-rejilla-trabajos {
grid-template-columns: minmax( 0, 1fr );
gap: var( --wp--preset--spacing--70 );
}
.zgn-rejilla-trabajos > .zgn-trabajo:nth-child( n ) {
grid-column: 1 / -1;
margin-block-start: 0;
} .zgn-trabajo .zgn-trabajo__etiqueta {
font-size: 13px !important;
}
.zgn-trabajo .zgn-trabajo__num {
font-size: 30px !important;
}
.zgn-trabajo .wp-block-group {
margin-block-start: var( --wp--preset--spacing--30 );
padding-block-start: var( --wp--preset--spacing--20 );
}
} .zgn-trabajo .wp-block-group {
align-items: center;
padding-block-start: 0;
margin-block-start: var( --wp--preset--spacing--20 );
border-block-start: 1px solid var( --wp--custom--arena-veil );
}
.zgn-trabajo__etiqueta {
color: var( --wp--preset--color--sai-arena );
opacity: .62;
} .zgn-trabajo__etiqueta a {
color: inherit;
text-decoration: none;
transition: color .25s ease;
}
.zgn-trabajo__etiqueta:has( a:hover, a:focus-visible ) {
opacity: 1;
}
.zgn-trabajo__etiqueta a:hover,
.zgn-trabajo__etiqueta a:focus-visible {
color: var( --wp--preset--color--sai-blue );
text-decoration: underline;
text-underline-offset: .3em;
} .zgn-faq__item > summary {
font-family: var( --wp--preset--font-family--heading ); font-size: var( --wp--preset--font-size--sai-md );
font-weight: 700;
line-height: 1.15;
text-transform: uppercase;
letter-spacing: 0;
transition: color .25s ease;
} .zgn-faq__item > summary:hover,
.zgn-faq__item > summary:focus-visible {
color: var( --wp--preset--color--sai-arena );
}
.zgn-faq__item > summary:hover .zgn-faq__num,
.zgn-faq__item > summary:hover::after {
color: inherit;
}
.zgn-faq__num { flex-shrink: 0;
white-space: nowrap;
align-self: center;
font-family: var( --wp--preset--font-family--sai-serif );
font-style: italic;
font-weight: 300;
font-size: var( --wp--preset--font-size--sai-sm );
text-transform: none;
letter-spacing: 0;
margin-inline-end: var( --wp--preset--spacing--30 );
} .zgn-faq__respuesta {
max-inline-size: 56ch;
}  .zgn-boton.is-style-outline > .wp-element-button {
padding-block: var( --wp--preset--spacing--40 );
padding-inline: var( --wp--preset--spacing--50 );
}
.zgn-boton:not( .is-style-outline ) > .wp-element-button {
padding-block: var( --wp--preset--spacing--30 );
padding-inline: var( --wp--preset--spacing--50 );
} .zgn-boton.is-style-outline > .wp-element-button:hover,
.zgn-boton.is-style-outline > .wp-element-button:focus-visible {
background-color: var( --wp--preset--color--sai-chocolate );
border-color: var( --wp--preset--color--sai-chocolate );
color: var( --wp--preset--color--sai-arena ) !important;
}
.zgn-trabajos .zgn-boton.is-style-outline > .wp-element-button {
border-color: var( --wp--custom--arena-veil );
} .zgn-trabajos .zgn-boton.is-style-outline > .wp-element-button:hover,
.zgn-trabajos .zgn-boton.is-style-outline > .wp-element-button:focus-visible {
background-color: var( --wp--preset--color--sai-arena );
border-color: var( --wp--preset--color--sai-arena );
color: var( --wp--preset--color--sai-chocolate ) !important;
} :is( .entry-content, .is-root-container ) .zgn-enlace-arena a {
text-decoration: none;
border-block-end: 2px solid var( --wp--custom--arena-veil );
padding-block-end: 4px;
} .wp-site-blocks {
overflow-x: clip;
} @supports ( text-box: trim-both cap alphabetic ) {
.zgn-barra .wp-block-site-title,
.zgn-barra .zgn-menu .wp-block-navigation-item__content {
text-box: trim-both cap alphabetic;
}
} .zgn-solo-lectores {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset( 50% );
white-space: nowrap;
border: 0;
}  :is( .zgn-cabecera, .zgn-pie ) :is( a, .wp-block-site-title a, .wp-block-navigation-item__content ) {
transition: color .25s ease, border-color .25s ease, opacity .25s ease;
}
:is( .zgn-cabecera, .zgn-pie ) a:hover,
:is( .zgn-cabecera, .zgn-pie ) a:focus-visible {
color: var( --wp--preset--color--sai-blue );
opacity: 1;
}  .zgn-cabecera .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.zgn-cabecera .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
color: var( --wp--preset--color--sai-blue );
} .zgn-cabecera .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.zgn-cabecera .wp-block-navigation-item__content.wp-block-navigation-item__content[ aria-current="page" ] {
color: var( --wp--preset--color--sai-blue );
}  .zgn-boton--solido > .wp-element-button {
background-color: var( --wp--preset--color--sai-blue );
border-color: var( --wp--preset--color--sai-blue );
color: var( --wp--preset--color--sai-chocolate );
}
.zgn-boton--solido > .wp-element-button:hover,
.zgn-boton--solido > .wp-element-button:focus-visible {
background-color: var( --wp--preset--color--sai-arena );
border-color: var( --wp--preset--color--sai-arena );
color: var( --wp--preset--color--sai-chocolate );
} :is( .entry-content, .is-root-container ) :is( .zgn-enlace-arena, .zgn-enlace-subrayado ) a {
transition: color .25s ease, border-color .25s ease;
}
:is( .entry-content, .is-root-container ) :is( .zgn-enlace-arena, .zgn-enlace-subrayado ) a:hover,
:is( .entry-content, .is-root-container ) :is( .zgn-enlace-arena, .zgn-enlace-subrayado ) a:focus-visible {
color: var( --wp--preset--color--sai-blue );
border-block-end-color: var( --wp--preset--color--sai-blue );
}  :is( .zgn-portfolio-portada, .zgn-sobremi-portada, .zgn-contacto-portada ) {
padding-block-start: clamp( 210px, 24vh, 280px );
} .zgn-contacto-portada {
padding-block-start: clamp( 140px, 16vh, 170px );
}
:is( .zgn-portfolio-portada, .zgn-sobremi-portada ) > .wp-block-heading {
max-inline-size: 18em;
} .zgn-sangre {
padding: 0;
line-height: 0;
}
.zgn-sangre img {
inline-size: 100%;
display: block;
} :is( .entry-content, .is-root-container ) .zgn-cita {
border-inline-start: 2px solid var( --wp--preset--color--sai-blue );
padding-inline-start: var( --wp--preset--spacing--50 );
max-inline-size: 24em;
} .zgn-pasos > .zgn-paso + .zgn-paso {
margin-block-start: var( --wp--preset--spacing--30 );
padding-block-start: var( --wp--preset--spacing--30 );
border-block-start: 1px solid color-mix( in srgb, var( --wp--preset--color--sai-arena ) 15%, transparent );
}
.zgn-paso > .wp-block-heading {
margin-block-start: var( --wp--preset--spacing--20 );
} .zgn-paso > .zgn-paso__texto {
margin-block-start: .375rem;
max-inline-size: 38ch;
color: var( --wp--custom--arena-scrim );
} @media ( max-width: 781px ) {
.zgn-pasos > .zgn-paso + .zgn-paso {
margin-block-start: var( --wp--preset--spacing--40 );
padding-block-start: var( --wp--preset--spacing--50 );
}
.zgn-paso > p:first-child {
font-size: 48px !important;
}
.zgn-paso > .wp-block-heading {
margin-block-start: var( --wp--preset--spacing--40 );
font-size: 26px !important;
}
.zgn-paso > .zgn-paso__texto {
margin-block-start: .625rem;
}
} .zgn-pasos__fotos {
position: relative;
block-size: 100%;
min-block-size: 24rem;
overflow: hidden;
}
.zgn-pasos__fotos > .zgn-pasos__foto {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
visibility: hidden;
transition: opacity .6s cubic-bezier( 0.22, 1, 0.36, 1 ), visibility 0s linear .6s;
}
.zgn-pasos__fotos > .zgn-pasos__foto.is-activa {
opacity: 1;
visibility: visible;
transition: opacity .6s cubic-bezier( 0.22, 1, 0.36, 1 ), visibility 0s;
}
.zgn-pasos__fotos > .zgn-pasos__foto img {
block-size: 100%;
inline-size: 100%;
object-fit: cover;
display: block;
}
@media ( prefers-reduced-motion: reduce ) {
.zgn-pasos__fotos > .zgn-pasos__foto,
.zgn-pasos__fotos > .zgn-pasos__foto.is-activa {
transition: none;
}
} .zgn-cta-azul__caja .wp-block-heading {
max-inline-size: 22em;
} .zgn-datos__fila > .zgn-dato {
flex: 1 1 14rem;
} :is( .entry-content, .is-root-container ) .wp-block-heading .zgn-editorial,
:is( .entry-content, .is-root-container ) .zgn-trabajos .wp-block-heading em {
font-family: var( --wp--preset--font-family--sai-serif );
font-style: italic;
font-weight: 300;
letter-spacing: 0;
text-transform: none;
color: var( --wp--preset--color--sai-blue );
} .zgn-filtros-pf {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var( --wp--preset--spacing--40 );
padding-block-end: var( --wp--preset--spacing--50 );
border-block-end: 1px solid var( --wp--custom--arena-veil );
}
.zgn-filtros-pf__rotulo {
margin: 0;
font-size: var( --wp--preset--font-size--sai-micro );
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var( --wp--preset--color--sai-blue );
}
.zgn-filtros-pf__botones {
display: flex;
flex-wrap: wrap;
gap: var( --wp--preset--spacing--30 );
margin-inline-start: auto;
} .zgn-filtro-pf {
font: inherit;
font-size: var( --wp--preset--font-size--sai-mini );
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var( --wp--preset--color--sai-arena );
background-color: transparent;
border: 1px solid var( --wp--custom--arena-veil );
padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--50 );
cursor: pointer;
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.zgn-filtro-pf:hover,
.zgn-filtro-pf:focus-visible {
border-color: var( --wp--preset--color--sai-blue );
color: var( --wp--preset--color--sai-blue );
} .zgn-filtro-pf[ aria-pressed="true" ] {
background-color: var( --wp--preset--color--sai-blue );
border-color: var( --wp--preset--color--sai-blue );
color: var( --wp--preset--color--sai-chocolate );
}
.zgn-filtro-pf__cuenta {
opacity: .55;
margin-inline-start: .35em;
} .zgn-filtro-pf[ aria-pressed="true" ] .zgn-filtro-pf__cuenta {
opacity: .75;
} .zgn-filtros-pf__estado {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset( 50% );
} @media ( max-width: 781px ) {
.zgn-filtros-pf__botones {
flex: 1 1 100%;
flex-wrap: nowrap;
margin-inline: 0 calc( -1 * var( --wp--style--root--padding-right, 1.5rem ) );
padding-inline-end: var( --wp--style--root--padding-right, 1.5rem );
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.zgn-filtros-pf__botones::-webkit-scrollbar {
display: none;
}
.zgn-filtro-pf {
flex: none;
white-space: nowrap;
scroll-snap-align: start;
}
} .zgn-rejilla-trabajos > .zgn-trabajo[ hidden ] {
display: none;
} .zgn-rejilla-trabajos.is-filtrando {
grid-template-columns: repeat( auto-fill, minmax( min( 22rem, 100% ), 1fr ) );
align-items: start;
}
.zgn-rejilla-trabajos.is-filtrando > .zgn-trabajo {
grid-column: auto;
margin-block-start: 0;
} .zgn-recorrido__lista {
position: relative;
z-index: 1;
margin-block-start: var( --wp--preset--spacing--60 );
} .zgn-hito {
display: grid;
grid-template-columns: 5.5rem minmax( 0, 1fr ) minmax( 0, 20ch );
gap: var( --wp--preset--spacing--50 );
align-items: baseline;
padding-block: var( --wp--preset--spacing--30 );
border-block-end: 1px solid color-mix( in srgb, var( --wp--preset--color--sai-chocolate ) 20%, transparent );
transition: color .25s ease, opacity .25s ease;
cursor: pointer;
} .zgn-recorrido__lista > .zgn-hito:last-child {
border-block-end: 0;
} .zgn-hito > * {
margin-block: 0;
}
.zgn-hito__anio,
.zgn-hito__titulo,
.zgn-hito__etiqueta {
text-box: trim-both cap alphabetic;
}
.zgn-hito__titulo {
margin: 0;
}
.zgn-hito__etiqueta {
text-align: end;
}  @media ( hover: hover ) and ( pointer: fine ) {
.zgn-hito > * {
transition: opacity .25s ease;
}
.zgn-recorrido__lista:hover .zgn-hito > * {
opacity: .4;
}
.zgn-recorrido__lista .zgn-hito:hover > * {
opacity: 1;
}
} .zgn-hito {
padding-block: var( --wp--preset--spacing--50 );
}
.zgn-hito .zgn-hito__anio {
font-size: clamp( 28px, 2.4vw, 34px ) !important;
}
.zgn-hito .zgn-hito__titulo {
font-size: clamp( 28px, 3.4vw, 52px ) !important;
} @media ( max-width: 781px ) {
.zgn-hito {
grid-template-columns: minmax( 0, 1fr );
gap: var( --wp--preset--spacing--40 );
padding-block: var( --wp--preset--spacing--60 );
}
.zgn-hito .zgn-hito__anio {
font-size: 36px !important;
}
.zgn-hito .zgn-hito__titulo {
font-size: 30px !important;
}
.zgn-hito__etiqueta {
grid-column: 1;
text-align: start;
}
}    .zgn-contacto-portada__titular {
max-inline-size: 50%;
line-height: 1.02;
}
.zgn-contacto-portada__intro .zgn-contacto-portada__texto {
max-inline-size: 46ch;
}
@media ( max-width: 900px ) {
.zgn-contacto-portada__titular {
max-inline-size: none;
}
} .zgn-dato__rotulo {
opacity: .7;
}
.zgn-dato__valor {
margin: 0;
} .zgn-datos a {
text-decoration: none;
transition: color .25s ease;
}
.zgn-datos a:hover,
.zgn-datos a:focus-visible {
color: var( --wp--preset--color--sai-arena );
}  .wp-lightbox-container .lightbox-trigger {
opacity: 0 !important;
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
pointer-events: none;
}
.wp-lightbox-container .lightbox-trigger:focus-visible {
opacity: 1 !important;
pointer-events: auto;
outline: 2px solid currentColor;
outline-offset: 2px;
}  .zgn-pie {
align-items: center;
text-align: center;
}
.zgn-pie .zgn-pie__cta {
align-items: center;
margin-block-end: clamp( 72px, 10vw, 144px );
} .zgn-pie .zgn-pie__antetitulo {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 32px;
font-size: var( --wp--preset--font-size--sai-micro );
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.zgn-pie__antetitulo::before,
.zgn-pie__antetitulo::after {
content: "";
inline-size: 28px;
block-size: 1px;
background-color: var( --wp--preset--color--sai-blue );
}
.zgn-pie .zgn-pie__titular {
max-inline-size: 900px;
margin: 0 0 clamp( 40px, 5vw, 64px );
line-height: 1.03;
text-wrap: balance;
} .zgn-pie a.zgn-sello {
position: relative;
display: flex;
align-items: center;
justify-content: center;
inline-size: clamp( 170px, 16vw, 230px );
aspect-ratio: 1;
border-radius: 50%;
background-color: var( --wp--preset--color--sai-blue );
color: var( --wp--preset--color--sai-chocolate );
text-decoration: none;
transition:
background-color .6s ease,
transform .9s cubic-bezier( 0.16, 1, 0.3, 1 );
}
.zgn-pie a.zgn-sello:hover,
.zgn-pie a.zgn-sello:focus-visible {
background-color: var( --wp--preset--color--sai-arena );
color: var( --wp--preset--color--sai-chocolate );
transform: scale( 1.05 );
}
.zgn-pie a.zgn-sello:focus-visible {
outline: 2px solid var( --wp--preset--color--sai-arena );
outline-offset: 6px;
}
.zgn-sello__anillo {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
overflow: visible;
pointer-events: none;
}
.zgn-sello__anillo text {
font-size: 14px;
font-weight: 600;
letter-spacing: 5px;
fill: currentColor;
}
.zgn-sello__flecha {
display: inline-block;
font-size: clamp( 40px, 3.6vw, 52px );
line-height: 1;
transition: transform .9s cubic-bezier( 0.16, 1, 0.3, 1 );
}
.zgn-sello:hover .zgn-sello__flecha,
.zgn-sello:focus-visible .zgn-sello__flecha {
transform: scale( 1.25 );
}
@keyframes zgn-gira {
to {
transform: rotate( 360deg );
}
}
@media ( prefers-reduced-motion: no-preference ) {
.zgn-sello__anillo {
animation: zgn-gira 16s linear infinite;
} .zgn-sello:hover .zgn-sello__anillo,
.zgn-sello:focus-visible .zgn-sello__anillo {
animation-play-state: paused;
}
}
.zgn-pie .zgn-pie__logo {
margin: 0 0 44px;
}
.zgn-pie__logo img {
inline-size: clamp( 200px, 22vw, 310px );
block-size: auto;
} .zgn-pie__datos {
align-items: center;
gap: 20px;
font-size: var( --wp--preset--font-size--sai-xs );
letter-spacing: 0.03em;
}
.zgn-pie .zgn-pie__datos > * {
display: flex;
align-items: center;
margin: 0;
}
.zgn-pie__datos > * + *::before {
content: "";
inline-size: 5px;
block-size: 5px;
margin-inline-end: 20px;
border-radius: 50%;
background-color: var( --wp--preset--color--sai-blue );
}
.zgn-pie .zgn-pie__datos a {
color: var( --wp--preset--color--sai-arena );
text-decoration: none;
border-block-end: 1px solid color-mix( in srgb, var( --wp--preset--color--sai-arena ) 35%, transparent );
padding-block-end: 2px;
transition: opacity .25s ease;
}
.zgn-pie .zgn-pie__datos a:hover,
.zgn-pie .zgn-pie__datos a:focus-visible {
color: var( --wp--preset--color--sai-arena );
opacity: .7;
}
.zgn-pie__lugar {
font-size: var( --wp--preset--font-size--sai-micro );
letter-spacing: 0.2em;
text-transform: uppercase;
color: color-mix( in srgb, var( --wp--preset--color--sai-arena ) 60%, transparent );
} .zgn-pie .zgn-pie__legal {
align-self: stretch;
gap: 28px;
margin-block-start: clamp( 56px, 7vw, 104px );
padding-block-start: 32px;
border-block-start: 2px solid color-mix( in srgb, var( --wp--preset--color--sai-arena ) 20%, transparent );
font-size: var( --wp--preset--font-size--sai-micro );
letter-spacing: 0.1em;
text-transform: uppercase;
color: color-mix( in srgb, var( --wp--preset--color--sai-arena ) 60%, transparent );
}
.zgn-pie__legal > p {
margin: 0;
}
.zgn-pie .zgn-pie__legal a {
color: inherit;
text-decoration: none;
transition: color .25s ease;
}
.zgn-pie .zgn-pie__legal a:hover,
.zgn-pie .zgn-pie__legal a:focus-visible {
color: var( --wp--preset--color--sai-arena );
} .zgn-pie-financiacion .zgn-pie-financiacion__logos {
max-inline-size: 1200px;
margin-block: var( --wp--preset--spacing--30 ) 0;
}
.zgn-pie-financiacion__logos img {
inline-size: 100%;
block-size: auto;
aspect-ratio: 1536 / 106;
} @media ( min-width: 782px ) {
.zgn-pie-financiacion .zgn-pie-financiacion__logos {
max-inline-size: 690px;
}
} @media ( min-width: 782px ) {
.zgn-pie.zgn-pie {
padding-block-start: var( --wp--preset--spacing--70 ) !important;
}
.zgn-pie .zgn-pie__cta {
margin-block-end: clamp( 48px, 5vw, 80px );
}
.zgn-pie .zgn-pie__antetitulo {
margin-block-end: 24px;
}
.zgn-pie .zgn-pie__titular {
margin-block-end: clamp( 28px, 3vw, 44px );
font-size: clamp( 40px, 4.6vw, 68px ) !important;
}
.zgn-pie a.zgn-sello {
inline-size: clamp( 130px, 10vw, 160px );
}
.zgn-pie .zgn-pie__logo {
margin-block-end: 32px;
}
.zgn-pie__logo img {
inline-size: clamp( 170px, 14vw, 220px );
}
}   .zgn-gracias {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var( --wp--preset--spacing--30 );
text-align: center;
min-block-size: 100svh;
padding-block: var( --zgn-cabecera-alto, 5.5rem ) var( --wp--preset--spacing--60 );
padding-inline: var( --wp--style--root--padding-left ) var( --wp--style--root--padding-right );
} .zgn-gracias.zgn-gracias > * {
max-inline-size: 46ch;
margin-block: 0;
margin-inline: auto;
}
.zgn-gracias.zgn-gracias > h1 {
max-inline-size: 20ch;
} .zgn-gracias.zgn-gracias > .wp-block-buttons {
margin-block-start: var( --wp--preset--spacing--30 );
}  .zgn-tick {
inline-size: clamp( 88px, 12vw, 120px );
flex: none;
}
.zgn-tick svg {
inline-size: 100%;
block-size: auto;
overflow: visible;
}
.zgn-tick__aro,
.zgn-tick__check {
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.zgn-tick__aro {
stroke: currentColor;
stroke-dasharray: 345;
stroke-dashoffset: 345;
animation: zgn-tick-trazo .7s cubic-bezier( .65, 0, .35, 1 ) forwards;
} .zgn-tick__check {
stroke: var( --wp--preset--color--sai-blue );
stroke-dasharray: 60;
stroke-dashoffset: 60;
animation: zgn-tick-trazo .4s cubic-bezier( .25, 1, .5, 1 ) .55s forwards;
}
.zgn-tick__onda {
fill: none;
stroke: currentColor;
stroke-width: 1;
opacity: 0;
transform-origin: 60px 60px;
animation: zgn-tick-onda .9s ease-out .55s forwards;
}
@keyframes zgn-tick-trazo {
to {
stroke-dashoffset: 0;
}
}
@keyframes zgn-tick-onda {
from {
opacity: .55;
transform: scale( .85 );
}
to {
opacity: 0;
transform: scale( 1.35 );
}
} @media ( prefers-reduced-motion: reduce ) {
.zgn-tick__aro,
.zgn-tick__check {
animation: none;
stroke-dashoffset: 0;
}
.zgn-tick__onda {
animation: none;
}
}
.zgn-gracias .wp-block-buttons {
max-inline-size: none;
}  @keyframes zgn-cta-abrir {
to {
inset-block: calc( 50% - 50vh );
inset-inline: calc( 50% - 50vw );
}
}
.zgn-cta-azul__caja {
position: relative;
}
.zgn-cta-azul__caja::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-color: var( --wp--preset--color--sai-blue );
animation: zgn-cta-abrir linear both;
animation-timeline: view();
animation-range: entry 15% cover 50%;
} .zgn-cta-azul__caja > * {
position: relative;
z-index: 1;
}
@media ( prefers-reduced-motion: reduce ) {
.zgn-cta-azul__caja::before {
animation: none;
}
} @media ( max-width: 781px ) {
.zgn-cta-azul__caja::before {
animation: none;
}
.zgn-cta-azul .zgn-boton.is-style-outline > .wp-element-button:hover {
background-color: transparent;
border-color: currentColor;
color: var( --wp--preset--color--sai-chocolate ) !important;
}
}   @media ( max-width: 781px ) {
.zgn-conversacion .wp-block-column:first-child {
display: none;
}
}
@media ( min-width: 782px ) {
.zgn-conversacion .wp-block-column:first-child {
position: sticky;
inset-block-start: calc( var( --zgn-cabecera-alto, 5.5rem ) + var( --wp--preset--spacing--50 ) );
align-self: start;
}
}  .zgn-form__fila {
display: grid;
grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); column-gap: var( --wp--preset--spacing--60 );
row-gap: var( --wp--preset--spacing--50 );
}
@media ( max-width: 781px ) {
.zgn-form__fila {
grid-template-columns: minmax( 0, 1fr );
}
}
.zgn-form__campo {
display: flex;
flex-direction: column; gap: var( --wp--preset--spacing--20 );
} .zgn-form .wpcf7-form-control-wrap {
display: block;
margin: 0;
}
.zgn-form__campo--ancho {
grid-column: 1 / -1;
}
.zgn-form__rotulo {
font-size: var( --wp--preset--font-size--sai-micro );
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
} .zgn-form input[ type="text" ],
.zgn-form input[ type="email" ],
.zgn-form input[ type="tel" ],
.zgn-form select,
.zgn-form textarea {
inline-size: 100%;
font-family: inherit;
font-size: var( --wp--preset--font-size--sai-sm );
line-height: 1.6;
color: inherit;
background-color: transparent;
border: 0; border-block-end: 1px solid color-mix( in srgb, var( --wp--preset--color--sai-chocolate ) 50%, transparent );
border-radius: 0; padding: 0 0 2px;
transition: border-color .25s ease;
}
.zgn-form textarea {
resize: vertical; block-size: 7rem;
} .zgn-form :is( input, select, textarea ):focus {
outline: 0;
border-block-end-color: var( --wp--preset--color--sai-chocolate );
} .zgn-form ::placeholder {
color: color-mix( in srgb, var( --wp--preset--color--sai-chocolate ) 65%, var( --wp--preset--color--sai-arena ) );
opacity: 1;
} .zgn-form__opciones .wpcf7-checkbox {
display: flex;
flex-wrap: wrap;
gap: var( --wp--preset--spacing--30 );
}
.zgn-form__opciones .wpcf7-list-item {
margin: 0;
}
.zgn-form__opciones .wpcf7-list-item label {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.zgn-form__opciones input[ type="checkbox" ] {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset( 50% );
}
.zgn-form__opciones .wpcf7-list-item-label {
display: inline-block;
font-size: var( --wp--preset--font-size--sai-mini );
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase; border: 1px solid color-mix( in srgb, var( --wp--preset--color--sai-chocolate ) 20%, transparent );
padding: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--40 );
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.zgn-form__opciones label:hover .wpcf7-list-item-label {
border-color: var( --wp--preset--color--sai-chocolate );
} .zgn-form__opciones input:checked + .wpcf7-list-item-label {
background-color: var( --wp--preset--color--sai-blue );
border-color: var( --wp--preset--color--sai-blue );
color: var( --wp--preset--color--sai-chocolate );
} .zgn-form__opciones input:focus-visible + .wpcf7-list-item-label {
outline: 2px solid var( --wp--preset--color--sai-chocolate );
outline-offset: 2px;
} .zgn-form select {
appearance: none;
cursor: pointer;
padding-inline-end: var( --wp--preset--spacing--50 );
background-image: linear-gradient( 45deg, transparent 49%, currentColor 49% 51%, transparent 51% ),
linear-gradient( -45deg, transparent 49%, currentColor 49% 51%, transparent 51% );
background-size: 7px 7px;
background-position: right 7px center, right 2px center;
background-repeat: no-repeat;
} .zgn-form__legal {
margin-block-start: var( --wp--preset--spacing--60 );
display: flex;
flex-direction: column;
gap: var( --wp--preset--spacing--40 );
font-size: var( --wp--preset--font-size--sai-xs );
line-height: 1.6;
}
.zgn-form .wpcf7-acceptance .wpcf7-list-item {
margin: 0;
}
.zgn-form input[ type="checkbox" ] {
inline-size: 18px;
block-size: 18px;
margin-inline-end: var( --wp--preset--spacing--30 );
accent-color: var( --wp--preset--color--sai-chocolate );
cursor: pointer;
} .zgn-form input[ type="checkbox" ]:focus-visible {
outline: 2px solid var( --wp--preset--color--sai-chocolate );
outline-offset: 2px;
}
.zgn-form__aviso {
max-inline-size: 70ch;
margin: 0;
font-size: var( --wp--preset--font-size--sai-mini );
line-height: 1.65;
opacity: .7;
} .zgn-form__acciones {
margin-block-start: var( --wp--preset--spacing--60 );
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var( --wp--preset--spacing--50 );
}
.zgn-form input[ type="submit" ] {
font-family: inherit;
font-size: var( --wp--preset--font-size--sai-xs );
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var( --wp--preset--color--sai-arena );
background-color: var( --wp--preset--color--sai-chocolate );
border: 1px solid var( --wp--preset--color--sai-chocolate );
border-radius: 0;
padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--60 );
cursor: pointer;
transition: background-color .25s ease, color .25s ease;
}
.zgn-form input[ type="submit" ]:hover,
.zgn-form input[ type="submit" ]:focus-visible {
background-color: transparent;
color: var( --wp--preset--color--sai-chocolate );
} .wpcf7 form .wpcf7-response-output {
margin: var( --wp--preset--spacing--50 ) 0 0;
padding: var( --wp--preset--spacing--40 ) 0 0;
border: 0;
border-block-start: 1px solid var( --wp--custom--chocolate-veil );
font-family: var( --wp--preset--font-family--sai-serif );
font-style: italic;
font-size: var( --wp--preset--font-size--sai-fluid-sm );
line-height: 1.2;
}
.wpcf7-not-valid-tip {
font-size: var( --wp--preset--font-size--sai-mini );
letter-spacing: 0.06em;
margin-block-start: var( --wp--preset--spacing--20 );
}
.zgn-form .wpcf7-not-valid {
border-block-end-color: currentColor;
}
.wpcf7-spinner {
margin-inline-start: var( --wp--preset--spacing--30 );
} @media ( max-width: 781px ) { .zgn-pasos__fotos {
block-size: auto;
min-block-size: 0;
aspect-ratio: 4 / 5;
} .zgn-cifras {
justify-content: flex-start;
gap: var( --wp--preset--spacing--50 );
} .zgn-contacto__datos {
margin-inline-start: 0;
}
.zgn-contacto__datos p {
text-align: start;
} .zgn-datos__fila {
gap: var( --wp--preset--spacing--50 );
}
}  .zgn-legal .wp-block-post-content h2 {
margin-block-start: var( --wp--preset--spacing--50 );
font-size: var( --wp--preset--font-size--sai-md );
}
.zgn-legal .wp-block-post-content h3 {
margin-block-start: var( --wp--preset--spacing--40 );
font-size: var( --wp--preset--font-size--sai-base );
}body.tax-tipo .wp-site-blocks > header:has( .zgn-cabecera ) + * {
margin-block-start: 0;
} .zgn-archivo-tipo .zgn-volver {
margin-block-end: 0;
} .zgn-rejilla-archivo .zgn-trabajo {
padding: 0;
background: none;
}
.zgn-rejilla-archivo .wp-block-post-featured-image {
margin: 0;
overflow: hidden;
cursor: zoom-in;
}
.zgn-rejilla-archivo .wp-block-post-featured-image img {
display: block;
width: 100%;
} .zgn-rejilla-archivo .zgn-trabajo__etiqueta {
margin: 0;
font-family: inherit;
min-width: 0;
} .zgn-rejilla-archivo {
counter-reset: zgn-ficha;
}
.zgn-rejilla-archivo > li {
counter-increment: zgn-ficha;
}
.zgn-rejilla-archivo .zgn-trabajo > .wp-block-group::after {
content: counter( zgn-ficha, decimal-leading-zero ) / "";
flex: none;
font-family: var( --wp--preset--font-family--sai-serif );
font-size: var( --wp--preset--font-size--sai-fluid-sm );
font-style: italic;
font-weight: 300;
line-height: 1;
color: var( --wp--preset--color--sai-blue );
} @media ( min-width: 600px ) and ( max-width: 1023px ) {
.zgn-rejilla-archivo.wp-block-post-template.is-layout-grid {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}html.zgn-galeria-abierta {
overflow: hidden;
}
.zgn-galeria {
box-sizing: border-box;
width: 100%;
max-width: none;
height: 100dvh;
max-height: none;
margin: 0;
padding: 0 var( --wp--style--root--padding-right, 1.5rem ) var( --wp--preset--spacing--60 );
border: 0;
overflow-y: auto;
overscroll-behavior: contain;
color: var( --wp--preset--color--sai-arena );
background-color: var( --wp--preset--color--sai-chocolate );
}
.zgn-galeria::backdrop {
background-color: var( --wp--preset--color--sai-ink );
}
.zgn-galeria[ open ] {
animation: zgn-galeria-entra .35s ease both;
}
@keyframes zgn-galeria-entra {
from { opacity: 0; }
to   { opacity: 1; }
} .zgn-galeria__cabecera {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: flex-end;
gap: var( --wp--preset--spacing--40 );
padding-block: var( --wp--preset--spacing--50 );
margin-block-end: var( --wp--preset--spacing--50 );
border-block-end: 1px solid var( --wp--custom--arena-veil );
background-color: var( --wp--preset--color--sai-chocolate );
}
.zgn-galeria__rotulos {
flex: 1 1 auto;
min-width: 0;
}
.zgn-galeria__antetitulo,
.zgn-galeria__cuenta {
margin: 0;
font-size: var( --wp--preset--font-size--sai-micro );
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var( --wp--preset--color--sai-blue );
}
.zgn-galeria__titulo {
margin: .2em 0 .3em;
font-family: var( --wp--preset--font-family--heading );
font-size: var( --wp--preset--font-size--sai-fluid-lg );
font-weight: 400;
line-height: 1;
color: var( --wp--preset--color--sai-arena );
}
.zgn-galeria__cuenta {
color: var( --wp--preset--color--sai-arena );
opacity: .7;
} .zgn-galeria__volver,
.zgn-galeria__cerrar,
.zgn-galeria__paso {
font: inherit;
color: var( --wp--preset--color--sai-arena );
background-color: transparent;
border: 1px solid var( --wp--custom--arena-veil );
cursor: pointer;
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.zgn-galeria__volver:hover,
.zgn-galeria__volver:focus-visible,
.zgn-galeria__cerrar:hover,
.zgn-galeria__cerrar:focus-visible,
.zgn-galeria__paso:hover,
.zgn-galeria__paso:focus-visible {
border-color: var( --wp--preset--color--sai-blue );
color: var( --wp--preset--color--sai-blue );
}
.zgn-galeria :focus-visible {
outline: 2px solid var( --wp--preset--color--sai-blue );
outline-offset: 3px;
}
.zgn-galeria__volver {
flex: none;
padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--50 );
font-size: var( --wp--preset--font-size--sai-mini );
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.zgn-galeria__cerrar,
.zgn-galeria__paso {
position: relative;
flex: none;
width: 3rem;
height: 3rem;
padding: 0;
border-radius: 50%;
} .zgn-galeria__cerrar span::before,
.zgn-galeria__cerrar span::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1.1rem;
height: 1px;
background-color: currentColor;
transform: translate( -50%, -50% ) rotate( 45deg );
}
.zgn-galeria__cerrar span::after {
transform: translate( -50%, -50% ) rotate( -45deg );
}
.zgn-galeria__paso span::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: .6rem;
height: .6rem;
border-block-start: 1px solid currentColor;
border-inline-start: 1px solid currentColor;
transform: translate( -30%, -50% ) rotate( -45deg );
}
.zgn-galeria__paso.is-siguiente span::before {
transform: translate( -70%, -50% ) rotate( 135deg );
} .zgn-galeria__rejilla {
margin: 0;
padding: 0;
list-style: none;
columns: 4 16rem;
column-gap: var( --wp--preset--spacing--40 );
}
.zgn-galeria__rejilla[ hidden ] {
display: none;
}
.zgn-galeria__rejilla > li {
break-inside: avoid;
margin-block-end: var( --wp--preset--spacing--40 );
}
.zgn-galeria__miniatura {
display: block;
width: 100%;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
overflow: hidden;
}
.zgn-galeria__miniatura img {
display: block;
width: 100%;
height: auto;
transition: transform .6s ease, opacity .3s ease;
}
.zgn-galeria__miniatura:hover img,
.zgn-galeria__miniatura:focus-visible img {
transform: scale( 1.03 );
} .zgn-galeria__rejilla > li:first-child .zgn-galeria__miniatura {
box-shadow: 0 0 0 1px var( --wp--preset--color--sai-blue );
} .zgn-galeria__vista {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: 1fr auto;
align-items: center;
gap: var( --wp--preset--spacing--40 ); min-height: calc( 100dvh - 11rem );
}
.zgn-galeria__vista[ hidden ] {
display: none;
}
.zgn-galeria__foto {
grid-column: 2;
grid-row: 1;
margin: 0;
text-align: center;
}
.zgn-galeria__foto img {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: calc( 100dvh - 15rem );
margin-inline: auto;
object-fit: contain;
animation: zgn-galeria-entra .3s ease both;
}
.zgn-galeria__foto figcaption {
margin-block-start: var( --wp--preset--spacing--30 );
font-size: var( --wp--preset--font-size--sai-micro );
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: .7;
}
.zgn-galeria__paso.is-anterior {
grid-column: 1;
grid-row: 1;
}
.zgn-galeria__paso.is-siguiente {
grid-column: 3;
grid-row: 1;
}
.zgn-galeria__posicion {
grid-column: 1 / -1;
grid-row: 2;
margin: 0;
text-align: center;
font-family: var( --wp--preset--font-family--sai-serif );
font-style: italic;
font-weight: 300;
color: var( --wp--preset--color--sai-blue );
} .zgn-galeria.is-sola .zgn-galeria__paso,
.zgn-galeria.is-sola .zgn-galeria__posicion {
display: none;
}
.zgn-galeria.is-sola .zgn-galeria__foto {
grid-column: 1 / -1;
} @media ( max-width: 781px ) {
.zgn-galeria__cabecera {
flex-wrap: wrap;
align-items: center;
} .zgn-galeria__rotulos {
order: -2;
flex-basis: calc( 100% - 4rem );
}
.zgn-galeria__cerrar {
order: -1;
margin-inline-start: auto;
}
.zgn-galeria__rejilla {
columns: 2;
column-gap: var( --wp--preset--spacing--30 );
}
.zgn-galeria__rejilla > li {
margin-block-end: var( --wp--preset--spacing--30 );
}
.zgn-galeria__vista {
grid-template-columns: auto 1fr auto;
grid-template-rows: 1fr auto;
}
.zgn-galeria__foto {
grid-column: 1 / -1;
}
.zgn-galeria__foto img {
max-height: calc( 100dvh - 17rem );
}
.zgn-galeria__paso.is-anterior,
.zgn-galeria__paso.is-siguiente,
.zgn-galeria__posicion {
grid-row: 2;
}
.zgn-galeria__posicion {
grid-column: 2;
}
}
@media ( prefers-reduced-motion: reduce ) {
.zgn-galeria[ open ],
.zgn-galeria__foto img {
animation: none;
}
.zgn-galeria__miniatura img {
transition: none;
}
.zgn-galeria__miniatura:hover img,
.zgn-galeria__miniatura:focus-visible img {
transform: none;
}
}