/* dolcefoto.es, restored from the web archive. The original pages relied on scripts (menus, galleries, intro slideshow,
   cookie notice) that the archive build removes; this file gives the same pages a static, script-free presentation.
   Breakpoint 801px matches the site's own bundles. */

/* Cookie notice: its close and settings buttons were scripts, and the restored site sets no cookies, so the fixed bar
   would cover the bottom of every page for good. */
#aviso-cookies,
#config-cookies {
  display: none !important;
}

/* Scripts revealed the go-to-top button and the gallery viewer; without them they are empty boxes. */
.go-top,
.infinite-scroll-icon,
#dinagalviewer,
.loading-bg.loading-infinite,
.load-more-images,
.bangkok-text-hide,
.blog-search-input-mobile {
  display: none !important;
}

/* ---------- Menus: shared look ---------- */

#lside .menu-lista,
#lside .sub-opciones {
  list-style: none;
  margin: 0;
  padding: 0;
}

#lside .menu-lista li {
  list-style: none;
}

#lside .menu-lista .a-options {
  cursor: pointer;
}

/* The bundles name "Droid Sans" (or Lato) for the menu but the archive holds neither font; without a fallback the menu
   fell back to a serif face. Noto Sans is Droid Sans' successor. */
#lside .menu-lista,
#lside .menu-lista ul {
  font-family: "Droid Sans", "Noto Sans", "Open Sans", "Segoe UI", Arial, sans-serif;
}

/* A tap focuses the submenu trigger; keep the focus ring for keyboard use only. */
#lside .menu-lista a:focus:not(:focus-visible) {
  outline: none;
}

/* The second link in an item only held a Font Awesome arrow, and that font is not part of the archive. */
#lside .menu-lista .a-options > a.click-option:not(.title-option) {
  display: none !important;
}

/* ---------- Pages that kept their own bundle (intro, galleries): left column menu on desktop ---------- */

@media (min-width: 801px) {
  .template-intro .content-module-menu_desktop.menu-classicv,
  .template-galeria .content-module-menu_desktop.menu-classicv {
    opacity: 1 !important;
  }

  /* Closed branches keep max-height 0 from the bundle; hover or keyboard focus opens them in place. */
  #lside .menu-lista li.level-0:hover > ul.sub-opciones,
  #lside .menu-lista li.level-0:focus-within > ul.sub-opciones {
    max-height: 40em !important;
  }

  /* Items without their own link (Gallery, Prints & Licensing) render as plain text: same colour and height as links. */
  .template-intro #lside .desktop-classicv-menu-ul .a-options,
  .template-galeria #lside .desktop-classicv-menu-ul .a-options {
    display: flex;
    align-items: center;
    min-height: 25px;
    color: #aaa;
  }

  .template-intro #lside .desktop-classicv-menu-ul li.activo > .a-options,
  .template-galeria #lside .desktop-classicv-menu-ul li.activo > .a-options {
    color: #ddd;
  }

  .template-intro .desktop-classicv-menu-srollup,
  .template-intro .desktop-classicv-menu-srolldown,
  .template-galeria .desktop-classicv-menu-srollup,
  .template-galeria .desktop-classicv-menu-srolldown {
    display: none !important;
  }
}

/* ---------- Gallery pages: static grid in place of the script gallery ---------- */

.site-gallery {
  columns: 3 260px;
  column-gap: 6px;
  padding: 6px;
}

.site-gallery img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 6px;
  break-inside: avoid;
  background: #111;
}

/* ---------- Intro pages: full-screen photo, changing by CSS animation ---------- */

.template-intro .bangkok-fixed-img,
.template-inicio .bangkok-fixed-img {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  z-index: 0 !important;
  opacity: 1 !important;
  background: #000 url("/content/img/gal/999999/img-92331_201907070842245d21b0704ba14.sized.jpg") center / cover no-repeat !important;
}

.intro-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  animation: intro-fade 24s ease-in-out infinite both;
}

.intro-layer-2 {
  background-image: url("/content/img/gal/999999/sirenas1_201904240523415cbff2dda045d.sized.jpg");
  animation-delay: 6s;
}

.intro-layer-3 {
  background-image: url("/content/img/gal/999999/castillo-de-caudillaweb_201904240523405cbff2dc0e177.sized.jpg");
  animation-delay: 12s;
}

.intro-layer-4 {
  background-image: url("/content/img/gal/999999/mg-8442_201904240523405cbff2dcedd7e.sized.jpg");
  animation-delay: 18s;
}

/* Portrait screens get the two upright photos instead of two wide ones, so less of each picture is cropped away. */
@media (max-width: 800px) and (orientation: portrait) {
  .intro-layer-2 {
    background-image: url("/content/img/gal/999999/mg-0643_201904240523395cbff2db68de7.sized.jpg");
  }

  .intro-layer-4 {
    background-image: url("/content/img/gal/999999/img-4126-editar-4-definitivo_201904240523475cbff2e3f0bfa.sized.jpg");
  }
}

@keyframes intro-fade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-layer {
    display: none;
  }
}

.template-intro #bangkok-main,
.template-inicio #bangkok-main {
  position: relative;
  z-index: 1;
}

.template-intro,
.template-intro #rside,
.template-intro .content-base,
.template-inicio #rside,
.template-inicio .content-base {
  background: transparent !important;
}

.template-intro .infinite-intro,
.template-intro .infinite-intro-full {
  display: none !important;
}

@media (min-width: 801px) {
  .template-intro #lside {
    background: rgba(0, 0, 0, 0.62) !important;
  }
}

/* ---------- Pages whose own bundle was not archived (inicio, blog, text, contact, instagram) ---------- */

html:has(body.template-inicio),
html:has(body.template-blog),
html:has(body.template-texto),
html:has(body.template-contacto),
html:has(body.template-galeria_instagram) {
  background: #000;
}

:is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) {
  background: transparent !important;
  color: #ccc;
}

:is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .container-fluid,
:is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) #bangkok-main {
  margin: 0;
  padding: 0;
}

:is(.template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .bangkok-fixed-img {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

:is(.template-blog, .template-texto, .template-contacto, .template-galeria_instagram) #bangkok-main {
  position: relative;
  z-index: 1;
}

/* Social icons are Font Awesome glyphs, a font the archive does not hold. */
:is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .bangkok-mobile-social,
:is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) #socialnet,
:is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .bangkok-footer-language,
:is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .content-inicio-footer .transparent-footer-social,
:is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .desktop-classicv-menu-srollup,
:is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .desktop-classicv-menu-srolldown {
  display: none !important;
}

:is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) #lside a {
  color: #aaa;
  text-decoration: none;
}

:is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) #lside a:hover,
:is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) #lside a:focus-visible {
  color: #fff;
}

/* Desktop: logo and one menu in a row, submenus drop down on hover or keyboard focus. */
@media (min-width: 801px) {
  :is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .content-module-menu_mobile {
    display: none !important;
  }

  :is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) #lside {
    position: relative;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.85);
  }

  :is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .bangkok-logo img {
    display: block;
    width: auto;
    height: 64px;
  }

  .template-inicio .bangkok-logo {
    display: none;
  }

  :is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .content-module-menu_desktop {
    flex: 1 1 auto;
  }

  :is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .content-module-menu_desktop .menu-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-family: "Droid Sans", Verdana, sans-serif;
    font-size: 17px;
  }

  :is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .content-module-menu_desktop li.level-0 {
    position: relative;
  }

  :is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .content-module-menu_desktop li.level-0 > .a-options {
    display: block;
    padding: 8px 12px;
    color: #aaa;
    white-space: nowrap;
  }

  :is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .content-module-menu_desktop li.level-0.activo > .a-options,
  :is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .content-module-menu_desktop li.activo > .a-options > a {
    color: #fff;
  }

  /* Closed submenus stay in the page off screen, so keyboard focus can still reach them and open them. */
  :is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .content-module-menu_desktop ul.sub-opciones {
    position: absolute;
    top: 100%;
    left: -9999px;
    z-index: 30;
    min-width: 100%;
    padding: 6px 0;
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  }

  :is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .content-module-menu_desktop li.level-0:hover > ul.sub-opciones,
  :is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .content-module-menu_desktop li.level-0:focus-within > ul.sub-opciones {
    left: 0;
  }

  :is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) .content-module-menu_desktop ul.sub-opciones .a-options {
    display: block;
    padding: 6px 16px;
    font-size: 15px;
    white-space: nowrap;
    color: #aaa;
  }

  :is(.template-inicio, .template-blog, .template-texto, .template-contacto, .template-galeria_instagram) #rside {
    padding-left: 0;
  }
}

/* ---------- Mobile (all template pages): logo, then the one mobile menu as a wrapped row ---------- */

@media (max-width: 800px) {
  [class*="template-"] .content-module-menu_desktop,
  [class*="template-"] .bangkok-logo,
  [class*="template-"] .bangkok-mobile-social,
  [class*="template-"] .mobile-cool-navbar-header,
  [class*="template-"] .content-module-menu_mobile.space-zone,
  [class*="template-"] #menu-redes {
    display: none !important;
  }

  [class*="template-"] #lside {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: 20;
    background: rgba(0, 0, 0, 0.85) !important;
  }

  [class*="template-"] .content-module-menu_mobile.fixed-zone {
    position: relative !important;
    display: block !important;
    width: 100%;
    background: transparent !important;
  }

  [class*="template-"] .content-module-menu_mobile .content-logo {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 10px 14px 4px !important;
    background: transparent !important;
  }

  [class*="template-"] .content-module-menu_mobile .content-logo img {
    display: block;
    width: auto;
    height: 52px;
    max-width: 100%;
    padding: 0 !important;
  }

  .template-inicio .content-module-menu_mobile .content-logo {
    display: none !important;
  }

  [class*="template-"] .mobile-cool-navbar-parent,
  [class*="template-"] .mobile-cool-navbar-block,
  [class*="template-"] .mobile-cool-navbar-collapse,
  [class*="template-"] .azirona-menu-zonemenu,
  [class*="template-"] .mobile-cool-navbar-menu,
  [class*="template-"] .mobile-cool-navbar,
  [class*="template-"] .mobile-cool-navbar .container-fluid {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  [class*="template-"] .espacio-centrar-menu {
    display: none !important;
  }

  [class*="template-"] .mobile-cool-menu-ul {
    margin: 0 !important;
    padding: 0 8px 8px !important;
    list-style: none;
  }

  [class*="template-"] .mobile-cool-menu-ul > .menu-lista {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0 2px;
    margin: 0;
    padding: 0;
    font-family: "Droid Sans", Verdana, sans-serif;
  }

  [class*="template-"] .mobile-cool-menu-ul li.level-0 {
    position: static;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  [class*="template-"] .mobile-cool-menu-ul .a-options {
    display: block !important;
    padding: 7px 8px !important;
    border: 0 !important;
    font-size: 15px;
    line-height: 1.3;
    color: #aaa;
  }

  [class*="template-"] .mobile-cool-menu-ul .a-options a {
    display: inline !important;
    padding: 0 !important;
    color: #aaa !important;
    text-decoration: none;
  }

  [class*="template-"] .mobile-cool-menu-ul li.activo > .a-options,
  [class*="template-"] .mobile-cool-menu-ul li.activo > .a-options > a {
    color: #fff !important;
  }

  /* Submenus open under the menu, full width, on tap (the trigger is a link, so it takes focus) or hover. */
  [class*="template-"] .mobile-cool-menu-ul > .menu-lista {
    position: relative;
  }

  [class*="template-"] .mobile-cool-menu-ul ul.sub-opciones {
    display: block !important;
    position: absolute !important;
    top: 100%;
    left: -9999px;
    right: auto;
    z-index: 30;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 8px 8px !important;
    list-style: none;
    background: rgba(0, 0, 0, 0.95) !important;
  }

  [class*="template-"] .mobile-cool-menu-ul li.level-0:hover > ul.sub-opciones,
  [class*="template-"] .mobile-cool-menu-ul li.level-0:focus-within > ul.sub-opciones {
    left: 0;
  }

  /* The intro bundle hides submenu items until its script expands them. */
  [class*="template-"] .mobile-cool-menu-ul ul.sub-opciones li {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  [class*="template-"] .mobile-cool-menu-ul ul.sub-opciones .a-options,
  [class*="template-"] .mobile-cool-menu-ul ul.sub-opciones .a-options a {
    font-size: 15px !important;
    background: transparent !important;
  }

  [class*="template-"] #rside {
    padding-left: 0 !important;
  }
}

/* ---------- Inicio pages: centred logo and the four blocks over the photo ---------- */

.template-inicio #rside {
  position: relative;
  min-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.template-inicio .transparent-blocks-position {
  padding: 40px 16px;
}

/* The logo is thin grey line art; a dark halo keeps it readable over a bright photo. */
.template-inicio .transparent-blocks-position .logo {
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

.template-inicio .transparent-blocks-position .logo img {
  width: 290px;
  max-width: 80%;
  margin: 0 auto 32px;
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));
}

.template-inicio .transparent-container-blocks .item {
  margin: 8px 0;
  padding: 16px 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.55);
  text-align: center;
  font-size: 18px;
  color: #ddd;
}

.template-inicio .transparent-container-blocks a.item-a {
  text-decoration: none;
}

.template-inicio .transparent-container-blocks a.item-a .item {
  color: #fff;
}

.template-inicio .transparent-container-blocks a.item-a:hover .item,
.template-inicio .transparent-container-blocks a.item-a:focus-visible .item {
  background: rgba(0, 0, 0, 0.8);
}

.template-inicio .transparent-inicio-innerText {
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.7) !important;
  opacity: 1 !important;
  color: #ccc;
}

.template-inicio .content-inicio-footer {
  padding: 12px 24px;
}

/* ---------- Text pages: one panel over the background photo, as wide as the page's own --width-text ---------- */

.template-texto .bangkok-text {
  width: 100% !important;
  padding: 24px;
}

.template-texto .bangkok-text-container-translucido {
  display: none;
}

.template-texto .bangkok-text-container {
  width: var(--width-text, 50%);
  padding: 28px 36px;
  background: rgba(0, 0, 0, 0.85);
  color: #ccc;
}

.template-texto .content-title {
  margin-top: 0;
  color: #ddd;
}

@media (max-width: 800px) {
  .template-texto .bangkok-text {
    padding: 12px;
  }

  .template-texto .bangkok-text-container {
    width: 100%;
    padding: 20px 16px;
  }
}

/* ---------- Blog pages ---------- */

.template-blog #rside > *:not(footer) {
  margin-left: 24px;
  margin-right: 24px;
}

.template-blog .blog-post,
.template-blog .content-module-blog {
  display: flow-root;
  float: none;
  width: auto;
  margin-top: 24px;
  padding: 24px 28px;
  background: rgba(0, 0, 0, 0.75);
}

/* Bootstrap column gutters nest five deep in a post and pushed the text far from the panel edge. */
.template-blog .blog-post [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

.template-blog .blog-post .row {
  margin-left: 0;
  margin-right: 0;
}

/* Listing pages: a script loaded the posts, so the archive kept the box empty; it now holds a static list of cards,
   each a panel like the one on a post page. The search button needed the script too. */
.template-blog .content-module-blog.blog-index {
  padding: 0;
  margin: 0;
  background: transparent;
}

.template-blog .infinite-blog-search-index {
  display: none !important;
}

.site-post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 16px;
  margin-top: 24px;
}

.site-post {
  position: relative;
  padding: 24px 28px;
  background: rgba(0, 0, 0, 0.75);
  transition: background-color 0.2s;
}

.site-post:hover,
.site-post:focus-within {
  background: rgba(0, 0, 0, 0.88);
}

.site-post-title {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.25;
  color: #ddd;
}

.site-post-title a {
  color: inherit;
  text-decoration: none;
}

/* The title link covers the whole card, so the card is one click target. */
.site-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.site-post:hover .site-post-title,
.site-post-title a:focus-visible {
  color: #fff;
}

.site-post-title a:focus-visible {
  outline: none;
}

.site-post-title a:focus-visible::after {
  outline: 2px solid #ddd;
  outline-offset: -2px;
}

.site-post-meta {
  margin: 0 0 10px;
  font-size: 13px;
  color: #aaa;
}

.site-post-excerpt {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #ccc;
  overflow-wrap: anywhere;
}

@media (max-width: 800px) {
  .site-post-list {
    gap: 8px;
    margin-top: 8px;
  }

  .site-post {
    padding: 16px 14px;
  }

  .site-post-title {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-post {
    transition: none;
  }
}

.template-blog .blog-post .content-module-blog {
  margin-top: 0;
  padding: 0;
  background: transparent;
}

.template-blog .blog-title {
  margin: 0 0 8px;
  color: #ddd;
}

.template-blog .post-text img,
.template-blog .post-images img {
  max-width: 100%;
  height: auto;
}

.template-blog ul,
.template-blog ol {
  list-style: none;
  padding-left: 0;
}

.template-blog .post-text ul,
.template-blog .post-text ol {
  list-style: disc;
  padding-left: 1.4em;
}

.template-blog .zona-post-entradas {
  margin-top: 16px;
}

.template-blog .post-nav {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-blog .post-nav a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ddd;
  text-decoration: none;
}

@media (max-width: 800px) {
  .template-blog #rside > *:not(footer) {
    margin-left: 8px;
    margin-right: 8px;
  }

  .template-blog .blog-post,
  .template-blog .content-module-blog {
    padding: 16px 14px;
  }
}

/* ---------- Footer on pages without their bundle ---------- */

:is(.template-blog, .template-texto, .template-contacto, .template-galeria_instagram) footer.content-footer {
  clear: both;
  margin-top: 24px;
  padding: 14px 24px;
  font-size: 13px;
  color: #aaa;
  background: rgba(0, 0, 0, 0.85);
}

/* The pages' own mobile rule paints the inner footer box near-black with an id selector; the band above replaces it. */
:is(.template-blog, .template-texto, .template-contacto, .template-galeria_instagram) footer.content-footer *,
:is(.template-blog, .template-texto, .template-contacto, .template-galeria_instagram) #bangkok-main footer.content-footer .bangkok-footer {
  background: transparent !important;
}

:is(.template-blog, .template-texto, .template-contacto, .template-galeria_instagram) footer.content-footer .row {
  margin: 0;
}

:is(.template-blog, .template-texto, .template-contacto, .template-galeria_instagram) footer.content-footer [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
}

/* ---------- Contact pages: same panel as the text pages ---------- */

.template-contacto .bangkok-contactar {
  padding: 24px;
}

.template-contacto .bangkok-contactar-textos {
  width: var(--width-text, 50%);
  padding: 28px 36px;
  background: rgba(0, 0, 0, 0.85) !important;
  opacity: 1 !important;
  color: #ccc;
}

.template-contacto .content-title {
  margin-top: 0;
  color: #ddd;
}

/* The archive build removes forms and their fields; only the field labels were left, so the empty form is hidden. */
.template-contacto .bangkok-contactar-formulario,
.template-contacto .bangkok-contactar-hide,
.template-contacto .contact-mobile-icons,
.template-contacto #map {
  display: none !important;
}

@media (max-width: 800px) {
  .template-contacto .bangkok-contactar {
    padding: 12px;
  }

  .template-contacto .bangkok-contactar-textos {
    width: 100%;
    padding: 20px 16px;
  }
}