:root { --titulos: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif; --corpo: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; } *, *::before, *::after { box-sizing: border-box; } .grella { display: grid; grid-template-columns: [completo-start] minmax(var(--separacion), 1fr) [destacado-start] minmax(0, var(--destacado)) [contido-start] min(100% - (var(--separacion) * 2), var(--contido-max)) [contido-end] minmax(0, var(--destacado)) [destacado-end] minmax(var(--separacion), 1fr) [completo-end] ; } .grella > :not(.destacado, .completo), .completo > :not(.destacado, .completo) { grid-column: contido; } .grella > .completo { display: grid; grid-column: completo; grid-template-columns: inherit; } .completo > .completo { display: grid; grid-column: completo; grid-template-columns: inherit; } .grella > .destacado, .completo > .destacado { grid-column: destacado; } html, body { height: 100%; } body { display: grid; grid-template-rows: auto 1fr auto; color: rgb(var(--cor_10)); font-family: var(--corpo); font-size: 1rem; font-weight: normal; background-color: rgb(var(--cor_60)); } a { color: rgb(var(--cor_30)); text-decoration-line: underline; text-decoration-style: dotted; } h1, h2, h3, h4, h5, h6 { color: rgb(var(--cor_30)); font-family: var(--titulos); font-weight: bold; text-wrap: balance; } a.boton { text-decoration: none; } dl { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10%; max-width: 18.75rem; margin: 0; font-family: var(--titulos); font-size: 0.875rem; } dt { width: 10%; color: rgb(var(--cor_30)); } dt::after { content: ": "; } dd { width: 80%; margin: 0; padding: 0; } figure { margin: 0; } figure img { display: block; width: 100%; height: auto; object-fit: contain; } figure figcaption { padding: 10px 40px 20px; color: rgb(var(--cor_30)); font-family: var(--titulos); font-weight: normal; font-size: 1rem; text-align: center; } p, figcaption { max-width: 65ch; margin-inline: auto; } time { display: block; position: relative; height: 5rem; overflow: hidden; width: 5rem; border-radius: 0.6em; box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd; font-size: 0.75rem; background-color: #fff; } time * { display: block; width: 100%; font-size: 0.8rem; font-style: normal; font-weight: bold; text-align: center; } time em { position: absolute; bottom: 0; color: rgb(var(--cor_30)); } time strong { position: absolute; top: 0; padding: 0.3rem 0; box-shadow: 0 2px 0 rgb(var(--cor_30)); color: white; background-color: rgb(var(--cor_30)); } time span { padding-top: 1.6rem; color: black; font-size: 2rem; letter-spacing: -0.05rem; } ul, ol { display: flex; flex-direction: row; margin: 0; padding: 0; list-style: none; } ul a, ol a { text-decoration: none; } header#cabeceira { grid-template-rows: auto 1fr auto; margin-bottom: var(--separacion); padding-bottom: var(--separacion); border-bottom: 1px solid rgba(var(--cor_10), 0.5); } div#cabeceira-superior { margin-bottom: var(--separacion); padding-block: 0.5rem; border-bottom: 1px solid rgba(var(--cor_10), 0.5); background-color: #eeeeee; } nav#menu-usuario { display: grid; grid-template-columns: repeat(2, auto); justify-content: space-between; } nav#menu-usuario ul { grid-column: 2; justify-content: flex-end; } div#cabeceira-inferior { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--separacion) auto minmax(0, 1fr); justify-content: center; align-items: center; gap: var(--separacion) 0; } div#cabeceira-inferior a#logo { grid-column: 1 / span 5; } form#atopar { grid-column: 2; position: relative; } form#atopar input { display: block; appearance: none; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid rgb(var(--cor_10)); border-radius: 0; color: rgb(var(--cor_10)); transition: border-color 0.15s ease-in-out, } form#atopar label { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; padding: 0.5rem 0.75rem; border: 1px solid transparent; text-align: start; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; transform-origin: 0 0; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; } form#atopar input:focus { border-color: rgb(var(--cor_30)); outline: 0; color: var(--bs-body-color); } form#atopar input:focus ~ label { height: unset; width: unset; padding: 0; background-color: rgb(var(--cor_60)); opacity: unset; transform: scale(0.85) translateY(-0.8rem) translateX(0.15rem); } form#atopar .boton { position: absolute; top: 0; right: 0; } nav#menu-idiomas { grid-column: 4; } nav#menu-principal { grid-column: 1 / 6; } nav#menu-principal div#menu-despregable { position: fixed; top: 0; left: 0; bottom: 0; z-index: 99; max-width: 100%; width: 50%; border-right: 2px solid rgb(var(--cor_30)); background-color: rgb(var(--cor_60)); transform: translateX(-100%); transition: transform 0.3s ease-in-out; } nav#menu-principal div#menu-despregable.despregado { transform: translateX(0); } nav#menu-principal button.pechar { margin: 0.5rem var(--separacion); } nav#menu-principal ul { flex-direction: column; } div#menu-despregable li { border-left: 0.625rem solid rgb(var(--cor_60)) } div#menu-despregable li:has(.activo), div#menu-despregable li:hover { border-left: 0.625rem solid rgb(var(--cor_30)); text-decoration-line: underline; text-decoration-style: dotted; } div#menu-despregable li a { display: block; padding: 0.5rem; color: rgb(var(--cor_10)); font-size: 1rem; font-weight: var(--bs-nav-link-font-weight); text-decoration: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } nav#migas { margin-bottom: var(--separacion); } main#contido { grid-template-rows: auto 1fr; } main#contido article, article section { margin-bottom: calc(var(--separacion) * 2); } div.artigo p { margin-block-start: 0; } article#habitacions figure { position: relative; width: 100%; height: auto; overflow: hidden; padding: 0; text-align: center; background: rgb(var(--cor_30)); cursor: pointer; } article#habitacions figure img { display: block; object-fit: contain; position: relative; width: 100%; height: auto; min-height: 100%; max-width: 100%; background-color: rgb(var(--cor_60)); opacity: 0.9; transition: opacity 0.35s; } article#habitacions figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; backface-visibility: hidden; } article#habitacions figure figcaption, article#habitacions figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } article#habitacions figure figcaption::before { position: absolute; top: 1.875rem; right: 1.875rem; bottom: 1.875rem; left: 1.875rem; border: 2px solid #fff; box-shadow: 0 0 0 1.875rem rgba(255,255,255,0.2); content: ''; opacity: 0; transition: opacity 0.35s, transform 0.35s; transform: scale3d(1.4,1.4,1); } article#habitacions figure h2 { margin: 20% 0 var(--separacion) 0; color: rgb(var(--cor_30)); word-spacing: -0.15em; font-weight: 700; background: rgba(255,255,255,0.5); transition: transform 0.35s; } article#habitacions figure p { padding: 1em; letter-spacing: 1px; font-size: 68.5%; opacity: 0; transition: opacity 0.35s, transform 0.35s; transform: scale(1.5); } article#habitacions figure:hover img { opacity: 0.4; } article#habitacions figure:hover figcaption::before, article#habitacions figure:hover p { opacity: 1; transform: scale3d(1,1,1); } article#habitacions figure:hover h3 { transform: scale(0.9); } article#noticias { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(2, auto) 1fr; gap: var(--separacion); } section#mantemento img { margin-bottom: 1.5rem; padding: 3rem; border: 1px solid rgba(var(--cor_10), 0.3); border-radius: 0.5rem; box-shadow: 0 1rem 3rem rgba(var(--cor_10), 0.3); } section[id^="galeria-"] { grid-column: destacado; width: 100%; height: auto; margin-inline: auto; } section[id^="galeria-"] div.swiper-wrapper { height: auto; } section[id^="galeria-"] p.controis { display: flex; justify-content: center; margin: 0 auto; } section[id^="galeria-"] .swiper-button-prev, section[id^="galeria-"] .swiper-button-next { padding: var(--separacion); } section[id^="galeria-"] .swiper-pagination { padding: var(--separacion) 0; } section[id^="galeria-"] .swiper-button-prev, section[id^="galeria-"] .swiper-button-next, section[id^="galeria-"] .swiper-pagination { display: inline; position: relative; bottom: initial; top: initial; left: initial; right: initial; width: fit-content; height: auto; margin: -20px 0 0; color: rgb(var(--cor_10)); } section[id^="galeria-"] .swiper-button-next::after, section[id^="galeria-"] .swiper-button-prev::after { font-family: 'icomoon' !important;; font-size: 1.5rem; text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1.5; } section[id^="galeria-"] .swiper-button-prev::after, section[id^="galeria-"] .swiper-rtl .swiper-button-next::after { content: '\e91c'; } section[id^="galeria-"] .swiper-button-next::after, section[id^="galeria-"] .swiper-rtl .swiper-button-prev::after { content: '\e91d'; } section[id^="galeria-"] .swiper-pagination-bullet { display: inline; width: fit-content; margin: 0; padding: var(--separacion); background-color: transparent; } section[id^="galeria-"] .swiper-pagination-bullet:after { font-family: 'icomoon' !important;; font-size: 1.5rem; text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1.5; content: "\e91e"; } section[id^="galeria-"] .swiper-pagination-bullet-active:after { content: "\e91b"; } section[id^="imaxe-"], div[id^="imaxe-"] { display: grid; align-items: center; gap: var(--separacion); } section[id^="imaxe-"] div.artigo { align-self: start; } section[id^="reixa-"], div[id^="reixa-"] { display: grid; align-items: center; gap: var(--separacion); grid-template-columns: 1fr; } section[id^="reixa-"] img, div[id^="reixa-"] img { width: 100%; cursor: pointer; } section[id^="reixa-"] div.modal, div[id^="reixa-"] div.modal { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; padding: var(--separacion); background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); } section[id^="reixa-"] div.modal figure, div[id^="reixa-"] div.modal figure { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%; max-height: 100%; max-width: 100%; } section[id^="reixa-"] div.modal img, div[id^="reixa-"] div.modal img { width: 100%; height: 100%; object-fit: contain; margin: auto; } section[id^="reixa-"] div.modal figcaption, div[id^="reixa-"] div.modal figcaption { display: block; height: 40px; width: 80%; max-width: 700px; margin: auto; padding: var(--separacion) 0; text-align: center; color: #ccc; } section[id^="reixa-"] .modal-pechar, div[id^="reixa-"] .modal-pechar { position: absolute; top: var(--separacion); right: calc(var(--separacion) * 2); color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } section[id^="reixa-"] .modal-pechar:hover, div[id^="reixa-"] .modal-pechar:hover, section[id^="reixa-"] .modal-pechar:focus, div[id^="reixa-"] .modal-pechar:focus { color: #bbb; text-decoration: none; cursor: pointer; } section[id^="reixa-"] img.modal-imaxe, div[id^="reixa-"] img.modal-imaxe, section[id^="reixa-"] figcaption, div[id^="reixa-"] figcaption { animation-name: zoom; animation-duration: 0.6s; } section[id^="destacados-"], div[id^="destacados-"] { display: grid; grid-template-columns: 1fr; } section[id^="destacados-"] h2, div[id^="destacados-"] h2 { grid-column: 1 / 4; border-bottom: 1px solid rgba(var(--cor_10), 0.3); text-align: center; } section[id^="destacados-"] div.elemento, div[id^="destacados-"] div.elemento, section#contacto-info div.elemento { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: var(--separacion); padding: var(--separacion); } section[id^="destacados-"] .icona, div[id^="destacados-"] .icona, section#contacto-info .icona { grid-column: 1; grid-row: 1 / span 2; width: calc((var(--separacion) * 2) + 24px); height: calc((var(--separacion) * 2) + 25px); padding: var(--separacion); border-radius: 0.5rem; color: rgb(var(--cor_60)); font-size: 1.5rem; background-color: rgb(var(--cor_30)); } section[id^="destacados-"] h3, div[id^="destacados-"] h3, section#contacto-info h2 { grid-column: 2; grid-row: 1; margin: 0; } section[id^="destacados-"] p, div[id^="destacados-"] p, section#contacto-info p { grid-column: 2; grid-row: 2; margin: 0; margin-bottom: var(--separacion); } section#contacto-formulario, section#accceso-formulario { display: grid; grid-template-columns: 1fr; gap: var(--separacion); padding: var(--separacion); border: 1px solid rgba(var(--cor_10), 0.5); border-radius: 0.5rem; background-color: #eeeeee; } section#accceso-formulario { width: min(100%, 22rem); margin: 0 auto; } section#contacto-formulario form, section#accceso-formulario form { display: grid; grid-template-columns: 1fr; row-gap: var(--separacion); } section#contacto-formulario iframe#mapa { width: 100%; height: 100%; padding: var(--separacion); border-radius: 0.5rem; background-color: rgb(var(--cor_30)); } section#contacto-info { display: flex; justify-content: center; flex-wrap: wrap; row-gap: var(--separacion); margin: 0 auto; } section#contacto-info div.elemento { width: 100%; } section#categorias, section#etiquetas { margin-bottom: var(--separacion); } section#categorias h2, section#etiquetas h2 { margin: 0; } section#categorias ul, section#etiquetas ul { gap: var(--separacion); } section.acordeon > input[type="radio"] { position: absolute; left: -100vw; } section.acordeon ul { overflow-y: hidden; height: 0; transition: height 0.3s ease; } section.acordeon label { display: block; position: relative; padding: var(--separacion); border: 1px solid rgba(var(--cor_10), 0.5); border-radius: 0.5rem 0.5rem 0 0; background-color: #eeeeee; } section.acordeon label::after { position: absolute; right: 0; font-family: 'icomoon' !important; font-variant: normal; font-style: normal; font-weight: normal; line-height: 1; text-transform: none; content: "\e920"; } section.acordeon > input[type="radio"]:checked ~ h2 label::after { content: "\e91f"; } section.acordeon > input[type="radio"]:checked ~ ul { height: auto; overflow: visible; padding: 15px; border: 1px solid rgba(var(--cor_10), 0.5); border-top: 0; } section.noticias { display: grid; grid-template-columns: 1fr; gap: var(--separacion); } section.noticias aside { grid-column: 1; grid-row: 1; } section.noticias > div { grid-column: 1; grid-row: 2; } nav.paxinacion ul { justify-content: center; gap: var(--separacion); margin-block: var(--separacion); } section.noticias article.artigo header { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; gap: var(--separacion); margin-bottom: var(--separacion); } section.noticias time { grid-column: 1; grid-row: 1 / 3; } section.noticias h3 { grid-column: 2; grid-row: 1; margin: 0; } section.noticias dl { grid-column: 2 / 3; grid-row: 2; } section.noticias dt span { display: none; } section.noticias img { width: 100%; } footer#pe { padding-block: 1.5rem; border-top: 1px solid ; color: rgb(var(--cor_60)); font-size: 0.875rem; background-color: rgb(var(--cor_30)); } footer#pe a { color: rgb(var(--cor_60)); } footer#pe div#info { display: grid; grid-template-columns: auto var(--separacion) auto } footer#pe p#copy { grid-column: 3; } footer#pe ul#redes { grid-column: 1 / 4; } footer#pe p#banners { grid-column: 1 / 4; } footer#pe p#desenrolo { grid-column: 1 / 4; } footer#pe p#banners img { padding: var(--separacion); } footer#pe ul#redes { justify-content: center; } footer#pe ul#redes li a { padding: var(--separacion); font-size: 2rem; } footer#pe p#desenrolo { grid-column: 1 / 7; font-size: 0.75rem; } .boton { display: inline-block; padding: 0.5rem; border: 1px solid rgb(var(--cor_10)); color: rgb(var(--cor_10)); background-color: transparent; cursor: pointer; } .boton.primario { border-color: transparent; color: rgb(var(--cor_60)); background-color: rgb(var(--cor_30)); } .boton.activo { color: rgb(var(--cor_60)); background-color: rgb(var(--cor_10)); } .centrado, .align_center { text-align: center; } .flexible { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--separacion); } .linna { flex-direction: row; } .noscroll { overflow: hidden; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; white-space: nowrap; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); border: 0; } .element-focusable:focus { clip: auto; overflow: visible; height: auto; } .bypass-to-main:focus { top: 0; left: 0; width: 100%; height: 40px; line-height: 40px; text-align: center; background: rgb(var(--cor_30)); color: rgb(var(--cor_60)); } @media (min-width: 640px) { section[id^="reixa-"], div[id^="reixa-"] { grid-template-columns: repeat(2, 1fr); } section#contacto-info { column-gap: var(--separacion); } section#contacto-info div.elemento { width: calc(50% - (var(--separacion) / 2)); } footer#pe div#info { grid-template-columns: auto var(--separacion) auto 1fr auto; } footer#pe ul#redes { grid-column: 5; } footer#pe p#banners { grid-column: 1 / 6; } footer#pe p#desenrolo { grid-column: 1 / 6; } } @media (min-width: 768px) { div#cabeceira-inferior { grid-template-columns: auto 1fr auto var(--separacion) auto; } div#cabeceira-inferior a#logo { grid-column: 1; } form#atopar { grid-column: 3; } nav#menu-idiomas { grid-column: 5; } section[id^="imaxe-"], div[id^="imaxe-"] { grid-template-columns: repeat(2, 1fr); } section[id^="imaxe-"].superior, div[id^="imaxe-"].superior { grid-template-columns: 1fr; } section[id^="imaxe-"].esquerda figure, div[id^="imaxe-"].esquerda figure { grid-column: 1; grid-row: 2; } section[id^="imaxe-"].esquerda div.artigo, div[id^="imaxe-"].esquerda figure div.artigo { grid-column: 2; grid-row: 2; } section[id^="imaxe-"].dereita figure, div[id^="imaxe-"].dereita figure { grid-column: 2; grid-row: 2; } section[id^="imaxe-"].dereita div.artigo, div[id^="imaxe-"].dereita div.artigo { grid-column: 1; grid-row: 2; } section[id^="imaxe-"] h2 { grid-column: 1 / 3; grid-row: 1; } section[id^="reixa-"], div[id^="reixa-"] { grid-template-columns: repeat(3, 1fr); } section[id^="destacados-"], div[id^="destacados-"] { grid-template-columns: repeat(2, 1fr); } section.noticias { display: grid; grid-template-columns: 2fr 1fr; gap: var(--separacion); } section.noticias aside { grid-column: 2; grid-row: 1; } section.noticias > div { grid-column: 1; grid-row: 1; } } @media (min-width: 1024px) { dl { gap: 0; } dt { width: 60%; } dd { width: 40%; } nav#menu-usuario button.boton, nav#menu-principal div#menu-despregable button.boton { display: none; } nav#menu-principal div#menu-despregable { flex-grow: 1; position: static; z-index: auto; width: auto; height: auto; border: 0; background-color: transparent; transform: none; transition: none; } nav#menu-principal ul { flex-direction: row; justify-content: center; } nav#menu-principal ul li, nav#menu-principal ul li:has(.activo), nav#menu-principal ul li:hover { border-left: 0; } article#habitacions figure { width: calc(50% - (var(--separacion) * 2)); } article#noticias { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto 1fr; } section[id^="destacados-"], div[id^="destacados-"] { grid-template-columns: repeat(3, 1fr); } section#contacto-formulario { grid-template-columns: repeat(2, 1fr); padding: calc(var(--separacion) * 3); } section#contacto-formulario form { grid-template-columns: repeat(2, 1fr); } section#contacto-formulario iframe#mapa { min-height: 300px; } section#contacto-info div.elemento { width: calc(33% - (var(--separacion) / 2)); } section.noticias dt span { display: inline; } } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} }